CSS tips - Material Design な Text Field を作ろう

8 years ago

Demo

input 要素にフォーカスすると label が縮んで上に移動し, ボーダーの色が変わります.

Code

HTML

<div class='text-field'>  
  <input type='text' onfocus='this.classList.add("focused")' />
  <label>name</label>
</div>  
<div class='text-field'>  
  <input type='password' onfocus='this.classList.add("focused")' />
  <label>password</label>
</div>

CSS

.text-field {
  position: relative;
  margin-top: 1.5rem;

  input {
    padding-bottom: 0.5rem;
    background-color: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    transition: 256ms;
    &:focus {
      border-bottom: 2px solid blue;
    }
  }

  label {
    position: absolute;
    left: 0;
    top: -2px;
    color: #888;
    pointer-events: none;
    transition: 256ms;
  }

  input.focused + label {
    color: blue;
    top: -1rem;
    font-size: 0.6rem;
  }
}

Points

もともと input に当たっているスタイルをリセット

下記のように指定することでブラウザがデフォルトで当てているスタイルをリセットすることができます.

input {  
  background-color: transparent;
  border: none;
  outline: none;
}

隣接セレクタ(+)

隣接セレクタを使うことで js を使わずにフォーカス時のスタイルを変更することができます.

今回は, input 要素に .focused クラスが付与されていると label の位置, 色, サイズが変わるように指定しています.

input.focused + label {  
  color: blue;
  top: -1rem;
  font-size: 0.6rem;
}

phi

phiaryjust a creator