Лучший способ стилизации TextBox в CSS

Я хотел бы узнать, что лучше всего делать с чистым CSS.

Ситуация:

У меня есть текстовое поле, в котором я могу искать определенные элементы. Однако теперь у меня также есть расширенный поиск с почти тем же текстовым полем, но ширина расширенногоSearchTextbox меньше, чем стандартная.

Мой вопрос

Каков наилучший способ создания текстового поля?

Мое решение

Я исправил это сейчас следующим образом:

.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;
}

а затем в HTML он будет выглядеть примерно так для advancedSearchTextbox:

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

Это лучший способ сделать это? Или есть другие варианты? Что касается только одного другого текстового поля, он делает, но что, если мне нужно больше текстовых полей на других страницах?

Заранее спасибо:)!

Ответ 1

Вы можете настроить таргетинг на все текстовые поля с помощью input[type=text], а затем явно определить класс для текстовых полей, которым это необходимо.

Ваш CSS стал бы следующим:

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

HTML:

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

Ответ 2

ваш подход хорош...

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

Код HTML:

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

Ответ 3

Вы также хотите поместить некоторый текст (placeholder) в пустое поле ввода, чтобы пользователь понял, что вводить.

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

//css
.myClass{

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

Ответ 4

Вы можете использовать:

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

Определите свои общие атрибуты стиля внутри этого. и для дополнительного стиля вы можете добавить класс.