<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>

body {
  text-align: center;
  font-weight: bold;
  font-family:  sans-serif;
}

label {
  width: 100%;
  cursor: pointer;
}

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: 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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.