html4では、テキストフィールドは、type="text"という属性のみでしたが、
html5では、テキストフィールドには、type="url" とか type="email" といった属性が使えるようになっています。
WordPress4.8でコメントのtype属性は、type="text"が使われていますが、この部分をフィルターでちょっとだけ処理して、ユーザーのコメント入力を補助するCSSを考えてみたいと思います。
以下のサンプルコードは、TwentySeventeenで試したものです。
demo
フィルター
functions.php
<?php
add_filter("comment_form_default_fields","my_special_comment");
function my_special_comment($args){
$args['email']= str_replace('type="text"', 'type="email"', $args['email'] );
$args['url']= str_replace('type="text"', 'type="url"', $args['url'] );
return $args;
}
?>
CSS
.comment-form input[type="url"]:valid,
.comment-form textarea[name="comment"]:valid,
.comment-form input[name="author"]:valid,
.comment-form input[type="email"]:valid{
color:#000;
background:rgba(46, 204, 113,.4);
border: 1px solid #bbb;
}
.comment-form input[type="url"][name="url"]{
background:#fff;
}
input:required {
border-bottom:2px solid red;
}
.comment-form textarea[name="comment"]:invalid,
.comment-form input[type="email"]:invalid,
.comment-form input[type="url"]:invalid{
border-bottom:2px solid red;
}