まあ、技術的には、取得することはできません:before
し、:after
上の作業擬似要素input
要素を
W3Cから:
12.1:beforeおよび:after疑似要素
作成者は、生成されるコンテンツのスタイルと場所を:beforeおよび:after疑似要素で指定します。名前が示すように、:beforeおよび:after疑似要素は、要素のドキュメントツリーコンテンツの前後のコンテンツの場所を指定します。'content'プロパティは、これらの疑似要素と組み合わせて、何を挿入するかを指定します。
したがって、input
タグの形式で送信ボタンがあるプロジェクトがあり、他の開発者<button>
が通常の入力送信ボタンの代わりにタグを使用することを制限したため、ボタンをspan
セット内にラップするという別の解決策を思いつきましたposition: relative;
して、絶対に使用してアイコンを配置する:after
擬似。
注:デモフィドルはFontAwesome 3.2.1のコンテンツコードを使用するため、content
それに応じてプロパティの値を変更する必要があります。
HTML
<span><input type="submit" value="Send" class="btn btn-default" /></span>
CSS
input[type="submit"] {
margin: 10px;
padding-right: 30px;
}
span {
position: relative;
}
span:after {
font-family: FontAwesome;
content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
font-size: 13px;
position: absolute;
right: 20px;
top: 1px;
pointer-events: none;
}
Demo
さて、ここではすべてが1つのプロパティについて自明です。つまりpointer-events: none;
、:after
疑似的に生成されたコンテンツにカーソルを合わせるとボタンがクリックされないため、の値を使用none
すると、クリックアクションがそのコンテンツを通過するように強制されます。 。
Mozilla Developer Networkから:
エレメントがマウスイベントのターゲットではないことを示すことに加えて、値noneは、マウスイベントにエレメントを「通過」し、代わりにそのエレメントの「下」にあるものをターゲットにするよう指示します。
ハートのフォント/アイコンにカーソルを合わせDemo、使用しないとどうなるかを確認しますpointer-events: none;