By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,461 Members | 1,001 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,461 IT Pros & Developers. It's quick & easy.

CSS code for flush borders of form objects

P: 21
I am trying to display form fields with flush borders and eliminate the sunken effect. This works fine for text fields, but only partially for select boxes, or file inputs. IE6 and Firefox both display this problem but with different form objects.

Any help is greatly appreciated.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. .flat
  6. {
  7. border: 1px solid #acacac;
  8. font-family: sans-serif;
  9. font: 11px Arial;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <form name="Test_form" method="post" action="" enctype="multipart/form-data">
  15. <input type="hidden" name="form_username" value="">
  16. <input type="hidden" name="source_document" value="Gestion des donnees d'adresse">
  17. <table class="main" width="650" align="center" id="quote_request" summary="quote_request">
  18. <tr>
  19. <td>Email</td>
  20. <td><input class="flat" type="text" name="email_address" id="email_address" value="" size="70" maxlength="70">
  21. </td>
  22. </tr>
  23. <tr>
  24. <td>Attach a data file</td>
  25. <td><input class="flat" type="file" name="mailmyform_file" size="70" maxlength="100" id="form_file"></td>
  26. </tr>
  27. <tr>
  28. <td>Required by</td>
  29. <td>
  30. <select class="flat" name="requiredby" id="requiredby">
  31. <option value="Monday">Monday</option>
  32. <option value="Wednesday">Wednesday</option>
  33. <option value="Friday">Friday</option>
  34. </select>
  35. </td>
  36. </tr>
  37. </table>
  38. <br>
  39. <table align="center" id="submit_reset" summary="submit_reset">
  40. <tr>
  41. <td align="center"><input type="reset" id="reset" value="Reset" onclick=""></td>
  42. <td align="center"><input type="submit" id="submit" value="Submit" onclick=""></td>
  43. </tr>
  44. </table>
  45. </form>
  46. </body>
  47. </html>
  48.  
Mar 18 '08 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.