web-dev-qa-db-ja.com

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

hTMLでは、advancedSearchTextboxの場合は次のようになります。

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

これが最善の方法ですか？または、他に利用可能なオプションはありますか？他の1つのテキストボックスについては、実行可能ですが、他のページにさらにテキストボックスが必要な場合はどうすればよいですか？

前もって感謝します ：）！

htmlcsshtml5classcss3
10
Baklap4

すべてのテキストボックスを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" />
16
Neograph734

あなたのアプローチはかなり良いです...

.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" />
3
Baqer Naqvi

また、空の入力ボックスにテキスト（プレースホルダー）を入れたい

.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!">

ユーザーは入力する内容を理解します。

2
user3123529

次を使用できます。

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

この内部に共通のスタイル属性を定義します。さらにスタイルを追加するには、クラスを追加します。

2
Irfan TahirKheli