[解決済み] CSSでTextBoxをスタイルする最適な方法【終了しました

質問

ピュアCSSで何がいいのか聞いてみたいです。

状況について

特定の項目を検索するためのテキストボックスを持っています。しかし、現在、ほぼ同じテキストボックスで高度な検索も持っていますが、advancedSearchTextboxの幅はデフォルトのものよりも小さくなっています。

質問

テキストボックスのスタイルはどのようにしたらよいでしょうか？

私の解決策

今はこのように修正しました。

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

そして、AdvancedSearchTextboxのHTMLはこのようになります。

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

この方法が一番いいのでしょうか？それとも他に方法があるのでしょうか？他の1つのテキストボックスについては可能ですが、他のページでより多くのテキストボックスが必要な場合はどうすればよいのでしょうか？

よろしくお願いします :)!

どのように解決するのですか？

すべてのテキストボックスを対象に input[type=text] を作成し、必要なテキストボックスに対して明示的にクラスを定義します。

以下のようなコードになります。

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