minoji
10/23/2017 - 6:32 AM

form default setting

/* フォーム関連スタイルリセット */
input,
textarea,
select,
button {
  margin: 0;
  padding: 0;
  background: #fff;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
}
//focus時
input[type=text],
textarea {
  outline: none;
  border: 1px solid #aaa;
  transition: all .3s;
}
input[type=text]:focus,
textarea:focus {
  box-shadow: 0 0 7px $baseColor;
  border: 1px solid $baseColor;
}
//入力不可時
input[type=text]:disabled {
  background-color: #eee;
  cursor: not-allowed;
}
input:valid { color: $textColor; }
input:invalid { color: $danger; }

//textareaリサイズを縦のみに変更
textarea {
  resize: vertical;
}
//text
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]) {
}
//or
input[type=text],
input[type=password],
input[type=search],
input[type=tel],
input[type=url],
input[type=email],
input[type=date],
input[type=time],
input[type=number],
input[type=range],
input[type=color],
input[type=datetime],
input[type=datetime-local],
input[type=month],
input[type=week],
select,
textarea {
}
//checkbox
input[type=checkbox],
input[type=radio] {
}
//file
input[type=hidden],
input[type=file] {
}
//button
input[type=submit],
input[type=reset],
input[type=button],
input[type=image],
button {
}