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:
<input type="text" class="defaultTextBox advancedSearchTextBox" />
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 :)!
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 :
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_
<input type="text" class="advancedSearchTextBox" />
_x000D_
You Also wanna put some text (placeholder) in the empty input box for the
.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_
<input type="text" class="myClass" id="fname" placeholder="Enter First Name Here!">
_x000D_
user to understand what to type.
your approach is pretty good...
.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_
<input type="text" class="myclass" />
_x000D_
You can use:
input[type=text]
{
/*Styles*/
}
Define your common style attributes inside this. and for extra style you can add a class then.
Source: Stackoverflow.com