属性セレクタ

属性セレクタとは、CSS側から「属性」を指定することができる機能です。
要素[属性=値]
例えば、input要素のtype属性が”tel”のものだけに効果を適用するには、以下のように指定します。
input[type=”tel”]
属性セレクタには、この他に以下の物があります。

属性セレクタ	内容
要素[属性^=値]	属性が「値」で開始する要素
要素[属性$=値]	属性が「値」で終了する要素
要素[属性*=値]	属性が「値」を含む要素

下の例では、INPUT要素の「type属性」毎に枠の色と形、太さを変えています。

---

氏名：

電話：

メール：

---

<style type="text/css">
input[type="text"] {
    border-radius:8px;
    border:1px solid #000000;
}
input[type="tel"] {
    border-radius:4px;
    border:2px solid #AAAAFF;
}
input[type="email"] {
    border-radius:2px;
    border:2px solid #FF0000;
}
</style>
氏名：<input type="text" name="name"><br>
電話：<input type="tel" name="tel"><br>
メール：<input type="email" name="email"><br>