Topcoat

Text input

HTML

<input type="text" class="topcoat-text-input" placeholder="text" value="">
<br>
<br>
<input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>
<br>
<br>
<input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">

CSS

.topcoat-text-input,
.topcoat-text-input--large {
  line-height: 1.313rem;
  font-size: 12px;
  letter-spacing: 0;
  padding: 0 0.563rem;
  border: 1px solid #303233;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background-color: #404141;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
  box-shadow: inset 0 1px rgba(0,0,0,0.18);
  color: #c6c8c8;
  vertical-align: top;
}
.topcoat-text-input:focus,
.topcoat-text-input--large:focus {
  background-color: #646666;
  color: #fff;
  border: 1px solid #0940fd;
  -webkit-box-shadow: 0 0 0 2px #6fb5f1;
  box-shadow: 0 0 0 2px #6fb5f1;
}
.topcoat-text-input:disabled::-webkit-input-placeholder {
  color: #fff;
}
.topcoat-text-input:disabled::-moz-placeholder {
  color: #fff;
}
.topcoat-text-input:disabled:-ms-input-placeholder {
  color: #fff;
}
.topcoat-text-input:invalid {
  border: 1px solid #d83b75;
}

Large Text Input

Show code snippets

HTML

<input type="text" class="topcoat-text-input--large" value="" placeholder="text">
<br>
<br>
<input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>
<br>
<br>
<input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">

CSS

.topcoat-text-input--large {
  line-height: 1.688rem;
  font-size: 0.875rem;
}
.topcoat-text-input--large:disabled {
  color: #fff;
}
.topcoat-text-input--large:disabled::-webkit-input-placeholder {
  color: #fff;
}
.topcoat-text-input--large:disabled::-moz-placeholder {
  color: #fff;
}
.topcoat-text-input--large:disabled:-ms-input-placeholder {
  color: #fff;
}
.topcoat-text-input--large:invalid {
  border: 1px solid #d83b75;
}