Result
入力時にフォーカスして視認性を高める
良い手とは言えないし使用ケースを選ぶけど、一つの手として
css
input[type="text"] {/*基本装飾*/ background: none; outline: none; border: 1px solid #000; padding: 15px 50px; transition: all 0.5s ease-out; margin-bottom: 2em; font-size: 1em; font-weight: 100; border-radius: 3px; } input[type="text"]:focus {/*フォーカスしたら大きなbox-shadowを作る事で疑似的なハイライトを実装*/ box-shadow: 0 0 50px rgba(255, 255, 255, 0.5), 0 0 200px 20px black, 0 0 0 9000px rgba(0, 0, 0, 0.6); border-color: #fff; }
html
<div class="container"> <label for="name1">名前</label><br> <input type="text" id="name1" placeholder="たけし"/><br> <label for="name2">性別</label><br> <input type="text" id="name2" placeholder="男" /> </div>