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

Accepted 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 :

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" />

Answer 2

You can use:

input[type=text]
{
 /*Styles*/
}

Define your common style attributes inside this. and for extra style you can add a class then.

Answer 3

your approach is pretty good...

.myclass {
    height: 20px;
    position: relative;
    border: 2px solid #cdcdcd;
    border-color: rgba(0, 0, 0, .14);
    background-color: AliceBlue;
    font-size: 14px;
}

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

Answer 4

You Also wanna put some text (placeholder) in the empty input box for the

.myClass {
   ::-webkit-input-placeholder {
    color: #f00;
  }
   ::-moz-placeholder {
    color: #f00;
  }
  /* firefox 19+ */
   :-ms-input-placeholder {
    color: #f00;
  }
  /* ie */
  input:-moz-placeholder {
    color: #f00;
  }
}

<input type="text" class="myClass" id="fname" placeholder="Enter First Name Here!">

user to understand what to type.

Best Way to Style a Textbox in Css [Closed]

Must Read

4 Answers

Elena Rostova