Best way to style a TextBox in CSS [closed]

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:

<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 :)!

Answer 1

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] {
  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;
}

<input type="text" class="advancedSearchTextBox" />