Html 表单元素 CSS 设计

数字型 RANGE 滑动条

<input type="range" step="1" max="100" min="0" value="50" />

预设的基本样式 Style

margin:2px 2px 2px 2px; padding:0px 0px 0px 0px;

使用 CSS3 appearance 属性改变外观

appearance 显示 Html 元素的方式，例如将 <div> 显示成一个按钮 object.style.appearance="button"，这里使用 appearance:none 为支持不同浏览器所以保持 WebKit, Gecko 的属性。Safari 和 Chrome 使用替代的 -webkit-appearance 属性、Firefox 使用替代的 -moz-appearance 属性。

input{margin:8px 0px;padding:0px;width:100%;height:40px;
  background-color:#fff;-webkit-appearance:none;}
input::-webkit-slider-runnable-track{height:5px;background:#e3e6e9;border:none;border-radius:2px;}
input::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:30px;width:30px;
  border-radius:50%;background:#6e8091;border:3px solid #fff;margin-top:-13px;}

input::-moz-range-track{background-color:#e3e6e9;height:5px;border-radius:2px;border:none;}
input::-moz-range-progress{background-color:#ccc;height:5px;border-radius:2px;border:none;}
input::-moz-range-thumb{width:30px;height:30px;background:#6e8091;
  border-radius:50%;border:3px solid #fff;}

CSS 前缀属性 -webkit 主要用于 Chrome、Edge、Safari 等基于 WebKit 的浏览器、-moz 用于 Mozilla Firefox 等基于 Gecko 採用了 MPL (Mozilla Public License) 开源协议的浏览器，自由、开源、详细的软件许可证，1998 年初 Netscape 的 Mozilla 为其开源软件项目设计的软件许可证。表示该属性或选择器只适用于某个浏览器或浏览器引擎。

自定义 <datalist> 下拉清单

可以预先自定义 <option> 元素来出现下拉清单「点两下」，CSS 可以将 <label> 及 <input> 设置为相同的 CSS 属性保持对齐但是下拉清单 <datalist> 则无法控制，且不同浏览器显示的结果不同，以下的 <option> 以英文、中文不同排列 value 提供您测试。元素表示其它表单控件可选值，HTML 表单元素 DOM 介面为 HTMLDataListElement。

<label for="flowers-name-choice">选择花卉名称</label>
<input list="flowers-name-checklist" id="flowers-name-choice" name="flowers-name-choice" />

<datalist id="flowers-name-checklist">
  <option value="Apple Blossom">Apple Blossom</option>
  <option value="Balsam">Balsam</option>
  <option value="Cactus">Cactus</option>
  <option value="菊花">Chrysanthemum</option>
  <option value="水仙花">Daffodil</option>
  <option value="昙花">Epiphyllum</option>
  <option value="蝴蝶花">Fringed Iris</option>
  <option value="Magnolia">木兰花</option>
  <option value="Phalaenopsis">蝴蝶兰</option>
  <option value="Sunflower">向日葵</option>
</datalist>

label{width:120px;height:42px;padding:1px 2px;
  font-size:18px;line-height:42px;text-align:center;
  color:#fff;background-color:#3e7cf0;
  display:inline-block;box-sizing:border-box;}

input{width:200px;height:42px;line-height:42px;
  padding:1px 2px;font-size:18px;
  background-color:#fff;border:2px solid #3e7cf0;
  box-sizing:border-box;}
input:focus{outline:0;background-color:#ffffe0;}

checkbox, radio 选择项目 Switch Button

Html <input> 类型 Radio 单选及 Checkbox 复选的外观以 CSS 定义。

input[type=checkbox] {
  width:52px;
  height:24px;
  border-radius:11px;
  background-color:#c3c6c9;
  position:relative;
  display:block;
  cursor:pointer;
  appearance:none;
}
input[type=checkbox]:before {
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  width:16px;
  height:16px;
  background-color:#fff;
  display:block;
  border-radius:50%;
  transition: all .15s ease;
}
input[type=checkbox]:checked {
  background-color:#0099ff;
}
input[type=checkbox]:checked:before {
  left:32px;
}
input[type=checkbox]:after {
  content:"关闭";
  font-size:18px;
  position:absolute;
  top:0px;
  left:60px;
  white-space:nowrap;
}
input[type=checkbox]:checked:after {
  content:"开启";
}

input[type=checkbox] 主体使用 appearance:none; 取消浏览器预设元素外观。
input[type=checkbox]:before 制作开关 border-radius:50% 产生圆形 transition 滑动效果。
input[type=checkbox]:checked:before 这里是判断 :checked 为当选择时 left:32px 移动圆形。
input[type=checkbox]:after 以及 :checked:after 是文字的描述。

textarea resizing 调整大小功能

当前浏览器提供 <textarea> 右下角会有个小三角，拖曳时可以调整大小，可方便让浏览者依文字内容来变化尺寸，但也有可能因此改变了版面架构。再以 min-width, max-width, min-height, max-height 限制拖曳范围。

textarea{resize:both;}

textarea{resize:vertical;}   /* 只可上下 */
textarea{resize:horizontal;} /* 只可左右 */

关闭 <textarea> 调整大小功能

textarea{resize:none;}

CSS 设置 <textarea> 时常有预设字型未依照父元素，以及 rows="5" cols="20" 不容易控制尺寸大小，建议使用 CSS 来规范。常会使用的 CSS 属性。

textarea{width:100%;height:100px;margin:0px;padding:5px;border:2px solid #3e7cf0;
  resize:vertical;
  font-family:"微软正黑体",sans-serif;box-sizing:border-box;}

当 <textarea> 输入内容时出现的框，用于提示当前位置，如果想取消或自订样式时使用 CSS 关闭。

textarea:focus{outline:0;background-color:#ffffe0;}

文字在 <textarea> 出现拼字检查 spellcheck 的底线。设定 spellcheck 属性来控制拼字检查。
可以即时检查单字是否错误，如果不需要可以设置关闭。

<textarea spellcheck="false"></textarea>

使用 JavaScript 控制 <textarea> 内容，例如清除已经输入的文字。

document.getElementById("TEXTAREA").value = "";

在 Html div 标籤使用 resize

滑鼠于 <div> 拖曳时可以调整大小，第二 CSS 行为容器的尺寸设置。

div{overflow-x:hidden;overflow-y:hidden;resize:horizontal;}

div{min-width:200px;max-width:900px;width:900px;height:200px;}

行动装置、虚拟键盘的显示方式

行动装置 Html input 元素 <input> 类型用于「行动装置」输入时虚拟键盘的显示方式。

<input type="text" />

<input type="number" />

<input type="email" />

<input type="url" />

搜索输入框类型。当开始输入文字时，右边会出现 ✖ 可以删除内容。目前 Firefox 浏览器不支持。

<input type="search" />

<input type="color" />