」というアラートが表示されますね。inputタグには擬似要素が加えられないさて、ここで送信ボタンに擬似要素::afterで「>」アイコンをつけたくなりました。transform:rotate(45deg);}これは以前の記事の、CSSだけで作る「>」アイコンの方法です。アイコン出ないじゃん!どうやら、inputタグは擬似要素が非対応のようです。送信ボタンをdivで囲って擬似要素を当てる仕方がないので送信ボタンをdivタグで囲ってdivタグに擬似要素を当てる方法をとりました。CodePen.おお、アイコン出ました!やった!ただし...アイコンにカーソルを重ねたりクリックしてみてください。細かい部分ですが下記のような問題があります。「>」アイコンにカーソルを乗せるとhoverアクションのスタイルが当たらなくなる「>」アイコンの上でクリックするとアラートのクリックイベントが発火しない(値が空欄のとき)「>」アイコンの上でクリックするとデータ送信自体も無効になる(値が入っているとき)アイコンは送信ボタンではなくdivタグの擬似要素のため、ボタンを覆い隠すように重なっている状態です。そのためアイコン上はボタンのイベントが無効になってしまうのです。データ送信も行われないとは!これは事故の原因になりそうです。pointer-eventsで擬似要素のイベントを無効にする調べたところこの問題を解決してくれる方法がわかりました。CSSのpointer-eventsというプロパティです!※参考:http://nbnote.jp/blog/2012/04/mouse-enabled/あまり見かけないプロパティですが、値をnoneにするとセレクタのイベントを無効にすることができるようです。これを使うとなぜ解決できるのか?いまはこんな状態です。送信ボタンyomuの上に擬似要素.bg::afterが乗っかってる。yomuにはイベントが設定されている。.bg::afterにはイベントが設定されていない。yomuの上ではyomuのイベントが発火する。.bg::afterの上ではなにもイベントが発火しない。noneを設定すると下記の状態になります。CodePen.おお、やりました!「>」アイコン上でもホバーアクションが実行される「>」アイコン上でクリックしてもアラートも表示される(値が空欄のとき)「>」アイコン上でクリックしてもデータ送信が行われる(値が入っているとき)「>」アイコンというとても小さい面積の細かい設定ではありますが、ボタンとして自然な動きになり、データが未送信などの事故も防げます。安全なボタンになりました!最後に以上、inputタグの機能制限(ホーバー設定がない、擬似要素が無効など)によって起こった事例と、その対策でした。ちなみにpointer-eventsは他にもいろいろなことができそうです。※参考:https://coliss.com/articles/build-websites/operation/css/css-pointer-events.html例えばある要素をクリックすると、別の要素でイベントを発火させたりということもCSSだけで実現できます。これまでJSでしかできなかったことがどんどんCSSでできるようになっていっていますねぇ。19:19Tweet関連記事2019-12-17【CSS】Sass(SCSS)をGulpでコンパイルしてみるGulpの続きです。Gridで12分割グリッドシステムが簡単に作れた(grid-template-areas推し...HTML要素を横に並べる方法はいくつかあるが、その中の一つ「CSS...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。