inputにフォーカスしたらハイライトする

Ads

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>

via

Focus on a textfield