CSS備忘録

Formカスタマイズ用リセット appearance

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

これないとCSSカスタマイズできないので、必須リセットCSS。

inputのplaceholderカラー変更

input::placeholder {
  color: red;
}

たまにデザインに入っていて、毎回ググってたのでコピー用。

要素の反転

.revers {
  transform: scale(-1, 1);
}

スライダーとかのprev,nextのアイコン反転によく使う。

box-shadow

.content {
  box-shadow: 0 0 15px rgba(0,0,0,.3);
}

一番シンプルなやつ。

:-webkit-autofill

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #fff inset;
}

chromeのオートコンプリート機能使用時のinput入力後の水色の背景色を変更する。
参考サイト