マンガでわかるホームページ作成

inputのnameをcssセレクタとして指定する方法

inputではnameの指定がつきものです。そしてそのnameは多くの場合個別の値が指定されます。

ならわざわざclassをつけなくてもこのnameをセレクタとして指定できないだろうか。

ということでinputのnameをcssセレクタとして指定する方法を紹介します。

結論

input[name="値"]

例

<style>
input[name="example"]{
    border: 1px solid #999;
    padding: 10px;
    background: #f2f2f2;
    display: block;
    margin-bottom: 10px;
}
</style>
<input name="example" type="text" value="指定">
<input type="text" value="未指定">

[]を使うセレクタを属性セレクタと言います。この[]内にはhtmlタグの属性やその値を入れることができます。

「inputタグのname属性がexampleなら」というセレクタは「input[name="example"]」となります。

この属性セレクタは部分一致の指定も可能です。

詳しくはこちらをご覧ください。

CSSセレクタ一覧【使い方例あり】
主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。
この記事を読む

今回はnameの指定でしたが同じ方法でinput[type="text"]と指定するとテキストボックスのinputを指定することができます。

まとめ

nameをセレクタとして使うには[]属性セレクタを使う。

input[name="値"]

以上、inputのnameをcssセレクタとして指定する方法でした。

関連記事