イイダリョウのブログ。HTMLフォームの送信ボタンのinputタグにアイコン(擬似要素)を加えたかったのですが、できませんでした。それで、ボタンの外をdivで囲んで擬似要素を加えました。したら、なんということでしょう。ボタンの上に重なったアイコン部分は送信などのイベントが発火しないではありませんか!解決方法はpointer-eventsというCSSでした!!【目次】デフォルトの送信ボタンはhover設定がないCSSでhover設定を加えるJSで未入力送信時のクリックイベントを加えるinputタグには擬似要素が加えられない送信ボタンをdivで囲って擬似要素を当てるpointer-eventsで擬似要素のイベントを無効にする最後にデフォルトの送信ボタンはhover設定がないフォームの送信ボタンはinputタグのtype属性をsubmitにすると作ることができます。class="yomu"></form>formタグ:method属性もacion属性も空(データ送信無効)上のinputタグ:type属性がtext(1行テキスト)下のinputタグ:type属性がsubmit(送信ボタン)今回はダミーのフォームなのでformタグのmethod属性もacion属性を空にしています。クモのようにコツコツと送信ボタンをよりボタンとわかりやすくしたいのでCSSを当ててます。14px;}詳細は割愛しますが、ボタン幅は50%、文字色は#fff、背景色は#666、角丸は5px、などのスタイルです。クモのようにコツコツとできたフォームはこちら。1行川柳を送信する簡単なフォームです。CodePen.このままでも一応、フォームの体は成しているのですが、ちょっと問題が。PCブラウザでボタンにカーソルを重ねても矢印になりません。ボタンはaタグではなくinputタグのため、初期値ではhover設定がないんですな。このままだとボタンということがわかりづらい...*1。CSSでhover設定を加えるカーソルを重ねたときに送信ボタンとわかるよう、CSSを加えてみましたよ。CodePen.カーソルをボタンに重ねてみてください。カーソルが矢印になりましたね!あと、半透明で薄い色にした。「押せそう」感が出てきた!JSで未入力送信時のクリックイベントを加えるもうひとつよくあるアクション。アラートによるバリデーションをJSのクリックイベントで仕込む。alert('いやん。false);変数ikkuと.ikkuセレクタの紐付け変数yomuと.yomuセレクタの紐付け関数yonde()設定if文、もしikkuの値が空だったらいやん。いうアラートを表示せよ戻り値falseで送信を無効にせよ。送信無効のためにHTMLの送信ボタンにonsubmit属性を追加。yonde();">2019/02/17修正このままだとアラートを閉じたあとに送信が行われるようだったため、送信無効の処理を追加しました。開発日記ボタンにイベントを仕込むとこうなった。CodePen.テキストを何も入れない状態で送信ボタンを押してみてください。