Sexy Input Styling with CSS

form.html

<form class="myForm">
<input type="input" id="name">
</form>

input-nested.css

 .myForm input[type="text"] {
  display: block;
  margin: 2px;
  padding: 5px;
  width: 100%;
  font-family: 'Lora';
  font-size: 18px;
  border: 2px solid white;
  border-radius: 10px;
  background: transparent;
  color: white;
   box-sizing: border-box;
}

.myForm input[type="datetime-local"] {
 display: block;
 margin: 2px;
 padding: 5px;
 width: 100%;
 font-family: 'Lora';
 font-size: 18px;
 border: 2px solid white;
 border-radius: 10px;
 background: transparent;
 color: white;
  box-sizing: border-box;
}

::-webkit-input-placeholder {
color: #e74c3c;
}

:-moz-placeholder { /* Firefox 18- */
color: #e74c3c;
}

::-moz-placeholder {  /* Firefox 19+ */
color: #e74c3c;
}

:-ms-input-placeholder {
color: #e74c3c;
}

input.css

 input[type="text"] {
  display: block;
  margin: 2px;
  padding: 5px;
  width: 100%;
  font-family: 'Lora';
  font-size: 18px;
  border: 2px solid white;
  border-radius: 10px;
  background: transparent;
  color: white;
   box-sizing: border-box;
}

input[type="datetime-local"] {
 display: block;
 margin: 2px;
 padding: 5px;
 width: 100%;
 font-family: 'Lora';
 font-size: 18px;
 border: 2px solid white;
 border-radius: 10px;
 background: transparent;
 color: white;
  box-sizing: border-box;
}

::-webkit-input-placeholder {
color: #e74c3c;
}

:-moz-placeholder { /* Firefox 18- */
color: #e74c3c;
}

::-moz-placeholder {  /* Firefox 19+ */
color: #e74c3c;
}

:-ms-input-placeholder {
color: #e74c3c;
}