inputのtypeでCSSを指定する方法【ラジオボタン、テキストボックスなど】

inputももちろんCSSで調整することができます。

しかし同じinputでもラジオボタンとテキストボックスでは形がまったく違い、別のCSSを指定したいところです。

とはいえいちいちclassを付けるのも煩わしい。

ラジオボタン、テキストボックスなどCSSセレクタでinputを指定する方法を解説します。

【結論】input[type="○○"]

htmlにおいてinputはtype="○○"で区別します。

CSSセレクタでもこの違いを利用して区別します。

<style>
input[type="radio"]{
    ココにCSS
}
</style>
<input type="radio">

さらに特定のinputを指定したいならclassではなくnameで指定することもできます。

E[foo="bar"]

「foo属性がbarと一致するE」というセレクタの指定方法があります。

inputだけではなくどのhtmlタグとhtml属性でも使うことができます。

これを利用してinputのtype属性で区別しましょう。

inputセレクタ一覧

上記を踏まえて具体的なinputセレクタ一覧の紹介です。

ラジオボタン

<style>
input[type="radio"]{
    ココにCSS
}
</style>
<input type="radio">

チェックボックス

<style>
input[type="checkbox"]{
    ココにCSS
}
</style>
<input type="checkbox">

ボタン

<style>
input[type="button"],
input[type="submit"]{
    ココにCSS
}
</style>
<input type="button">
<input type="submit">

フォームにおいてbuttonは「戻る」などに、submitは「送信」などに使われます。

submitはEnterで押せる特徴があります。

どちらも見た目はボタンですので一緒に指定する場合は「,」を挟んで併せて指定しましょう。

「button」と「submit」を別々に指定したいときは別々に指定しましょう。

テキストボックス

<style>
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"]{
    ココにCSS
}
</style>
<input type="text">
<input type="email">
<input type="tel">
<input type="number">
<input type="password">

テキストボックスは一般的に「type="text"」ですが、入力内容に応じて様々な指定方法があります。

この場合CSSで「input[type="text"]」しか指定しないと「input[type="email"]」などを指定したときにCSSが効いていない状態になります。

email、tel、number、passwordあたりはよく使うtypeですので併せて指定しておきましょう。

dateなども使うならこれも一緒に指定しましょう。

まとめ

htmlタグ	CSSセレクタ
<input type="radio">	input[type="radio"]
<input type="checkbox">	input[type="checkbox"]
<input type="button">	input[type="button"]
<input type="submit">	input[type="submit"]
<input type="text">	input[type="text"]
<input type="email">	input[type="email"]
<input type="tel">	input[type="tel"]
<input type="number">	input[type="number"]
<input type="password">	input[type="password"]

以上、CSSセレクタでinputを指定する方法でした。