Best way to style a TextBox in CSS

Question

I would like to hear what s the best thing to do with pure CSS   The Situation   I m having a textbox in which i can search for specific items  Yet now i m also having an advanced search with almost the same textbox yet the width of the advancedSearchTextbox is less than the default one   My Question  What is the best way to style the textbox   My Solution  I ve fixed this now like this    defaultTextBox       padding  0      height  30px      position  relative      left  0      outline  none      border  1px solid  cdcdcd      border-color  rgba 0 0 0  15       background-color  white      font-size  16px     advancedSearchTextbox       width  526px      margin-right  -4px      and then in the HTML it d look something like this for the advancedSearchTextbox    lt input type  text  class  defaultTextBox advancedSearchTextBox    gt    Is this the best way to do it  Or are there any other options available  As for just 1 other textbox it s do-able but what if i need more textboxes on other pages   Thanks in advance

User · Answer

You Also wanna put some text  placeholder  in the empty input box for the    x000D   x000D   myClass   x000D       -webkit-input-placeholder   x000D      color   f00  x000D      x000D       -moz-placeholder   x000D      color   f00  x000D      x000D       firefox 19     x000D      -ms-input-placeholder   x000D      color   f00  x000D      x000D       ie    x000D    input -moz-placeholder   x000D      color   f00  x000D      x000D    x000D   lt input type  text  class  myClass  id  fname  placeholder  Enter First Name Here   gt  x000D   x000D   x000D    user to understand what to type

User · Answer

You could target all text boxes with input type text  and then explicitly define the class for the textboxes who need it   You can code like below     x000D   x000D  input type text    x000D    padding  0  x000D    height  30px  x000D    position  relative  x000D    left  0  x000D    outline  none  x000D    border  1px solid  cdcdcd  x000D    border-color  rgba 0  0  0   15   x000D    background-color  white  x000D    font-size  16px  x000D    x000D   x000D   advancedSearchTextbox   x000D    width  526px  x000D    margin-right  -4px  x000D    x000D   lt input type  text  class  advancedSearchTextBox    gt  x000D   x000D   x000D

User · Answer

You can use   input type text       Styles       Define your common style attributes inside this  and for extra style you can add a class then

User · Answer

your approach is pretty good         x000D   x000D   myclass   x000D      height  20px  x000D      position  relative  x000D      border  2px solid  cdcdcd  x000D      border-color  rgba 0  0  0   14   x000D      background-color  AliceBlue  x000D      font-size  14px  x000D    x000D   lt input type  text  class  myclass    gt  x000D   x000D   x000D

[html] Best way to style a TextBox in CSS

Examples related to html

Examples related to class

Examples related to css