【html/CSS】inputボタンに疑似要素(before,after)を使う方法

「inputのボタンにbefore,afterで装飾をしたいのにできない!?」

inputボタンに疑似要素(before,after)を使う方法を解説します。

inputにbefore,afterは使えない

inputタグ、selectタグ、textareaにbefore,afterを使うことはできません。

なお、aタグ、buttonタグは使えます。

<style>
.example>*{
    border: 1px solid #999;
}
.example>*::before{
    content: "before効く ";
}
.example>*::after{
    content: " after効く";
}
</style>
<div class="example">
    <a href="#">aタグ</a><br>
    <button>buttonタグ</button><br>
    <input type="button" value="input button"><br>
    <input type="text" value="input text"><br>
    <select><option>select</option></select><br>
    <textarea>textarea</textarea>
</div>

【結論】divで囲う

divやspanなどbefore,afterが効く要素で囲み、それらのbefore,afterを利用しましょう。

<style>
.example2>div{
    border: 1px solid #999;
    display: inline-block;
}
.example2>div::before{
    content: "before効く ";
}
.example2>div::after{
    content: " after効く";
}
</style>
<div class="example2">
    <div><input type="button" value="input button"></div><br>
    <div><input type="text" value="input text"></div><br>
    <div><select><option>select</option></select></div><br>
    <div><textarea>textarea</textarea></div>
</div>

ただし、valueやtextareaの文章内、selectの選択肢内に文字を入れ込むことはできません。

before,afterを装飾として使いたいときの策です。

divをinputの幅に合わせる方法

方法1.display:inline-block

display:inline-blockはブロック要素とインライン要素の特徴を兼ね備えた要素です。

これを指定すると子要素の幅に合わせることができます。

また、inputやtextarea、selectはもともとdisplay:inline-blockであるため、親和性も高いと言えるでしょう。

方法2.width:fit-content

width:fit-contentは子要素の幅に合わせるCSSと値です。

display:inline-blockと違い、ブロック要素であるため、brを指定する必要がないのも特徴です。

inputをbefore,afterで装飾した例

下記はinputタグのボタンとbuttonタグのボタンにbeforeで矢印の装飾をした例です。

どちらも意図通りデザインされています。

<style>
.example3>div{
    width: fit-content;
    position: relative;
    margin: 5px;
}
.example3 input[type="button"],.example3 button{
    padding: 10px 50px 10px 20px;
    border: none;
    background: #169b3a;
    color: #FFF;
}
.example3 button{
    position: relative;
    margin: 5px;
}
.example3>div::before,.example3 button::before{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: none;
    border-right: 2px solid #FFF;
    border-top: 2px solid #FFF;
    transform: translateY(-50%) rotate(45deg);
    position: absolute;
    top: 50%;
    right: 20px;
}
</style>
<div class="example3">
    <div><input type="button" value="input button"></div>
    <button>buttonタグ</button>
</div>

inputをdivで囲った場合、親子関係などに気を付けましょう。特にpaddingやmarginをどちらにつけるか気を付けましょう。

【まとめ】inputに疑似要素を使う方法

divやspanなどで囲み、それらのbefore,afterを利用する。

以上、inputボタンに疑似要素(before,after)を使う方法でした。