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>
