首先我们看一下表单样式，下面共有5张截图
一、CSS代码
/*表单*/
fieldset{
border: none;
margin-bottom: 2em;
}
fieldset > *{
margin-bottom: 1em }
fieldset:last-child{
margin-bottom: 0 }
fieldset legend{
margin: 0 0 1em }/* legend标签是CSS中用于定义各种列表样式的重要标签之一 */
fieldset input:not([type="checkbox"]):not([type="radio"]), fieldset select, fieldset textarea{
width: 100% }
fieldset label{
display: block; user-select: none;}
fieldset label > span:first-child{
opacity: .6;white-space: nowrap;margin-bottom: .5rem;display: inline-block;}
/* :required 选择器在表单元素是必填项时设置指定样式。 */
fieldset label.required > span:first-child:after{
color: red;content: "*";margin-left: .25em;}
input[disabled], textarea[disabled]{
cursor: no-drop !important;}
input, select, textarea{
margin: 0;outline: none;font: inherit;max-width: 100%;background: none;vertical-align: middle;}
input[disabled], textarea[disabled]{
cursor: no-drop !important;}
input[type*="date"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"],select, textarea{
padding: .5em;color: inherit;border-radius: var(--radius);border: var(--border-width) var(--gray) solid;}input.invalid, input:out-of-range{
border-color: #c40b00;background: rgba(255, 0, 0, .1);}
/* 文件选择 */
input[type="file"]:not([hidden]){
display: flex;align-items: center;}
input[type="file"]::-webkit-file-upload-button{
color: #fff;border: none;outline: none;padding: .5em 1em;font-size: inherit;margin-right: .5em;display: inline-block;border-radius: var(--radius);background-color: var(--primary);}
/* 颜色选择器 */
input[type="color"]{
width: 3em !important;height: 3em !important;border: none;padding: 0;}
input[type="color"]::-webkit-color-swatch-wrapper{
padding: 0;}
input[type="color"]::-moz-color-swatch{
border: none;}
input[type="color"]::-webkit-color-swatch{
border: none;border-radius: var(--radius);}
/* 滑动条 */
input[type="range"]{
margin: 0;height: 100%;-webkit-appearance: none;-moz-appearance: none;cursor: ew-resize;cursor: grab;overflow: hidden;min-height: 1.5rem;}
input[type="range"]:focus{
outline: none;box-shadow: none;}
input[type="range"]:active::-webkit-slider-thumb{
border-color: var(--primary);background-color: var(--primary);}
input[type="range"]:active::-moz-range-thumb{
border-color: var(--primary);background-color: var(--primary);}
input[type="range"]:focus::-ms-thumb{
border-color: var(--primary); background-color: var(--primary);}
input[type="range"]::-moz-focus-outer{
border: 0 }
input[type="range"]::-webkit-slider-runnable-track{
content: '';height: calc(var(--border-width) * 2);pointer-events: none;background-color: var(--primary);}
input[type="range"]::-webkit-slider-thumb{
width: 1em;height: 1em;-webkit-appearance: none;appearance: none;background: #fff;border-radius: 5em;margin-top: calc(-.5em + var(--border-width));border: var(--border-width) solid rgba(0, 0, 0, .15);transition: .3s border-color, .3s background-color;}
input[type="range"]::-moz-range-track{
height: 2px;background: rgba(0, 50, 126, .12);}
input[type="range"]::-moz-range-thumb{
width: 1em;height: 1em;background: #fff;border-radius: 5em;margin-top: calc(-.5em + var(--border-width));border: var(--border-width) solid rgba(0, 0, 0, .15);transition: .3s border-color, .3s background-color;}
input[type="range"]::-moz-range-progress{
border: 0;height: 2px;margin-top: 0;background-color: var(--primary);} /* 进度条 */
progress{
overflow: auto;border-radius: 50px;}
progress::-webkit-progress-bar{
background-color: #eee;}
/* 多选框 */
input[type="checkbox"], input[type="radio"]{
float: left;width: 1.5em;height: 1.5em;cursor: pointer;position: relative;margin: 0 .5em 0 0;-moz-appearance: none;-webkit-appearance: none;}
input[type="checkbox"]:before, input[type="radio"]:before{
content: '';width: 100%;height: 100%;display: block;box-shadow: 0 0 0 var(--border-width) var(--gray) inset;transition: background-color .3s, box-shadow .3s;}
input[type="checkbox"]:after{
top: 10%;left: 10%;width: 30%; height: 60%;content: '';position: absolute;transition: transform .3s;transform-origin: 100% 100%;border-right: .15em solid #fff;border-bottom: .15em solid #fff;transform: rotate(45deg) scale(0);}
input[type="radio"], input[type="radio"]:before{
border-radius: 100% }
input[type="checkbox"], input[type="checkbox"]:before{
border-radius: .2em }
input[type="radio"]:checked:before{
background-color: var(--primary);border: var(--border-width) solid var(--primary);box-shadow: 0 0 0 .2em #fff inset;}
input[type="checkbox"]:checked:before{
box-shadow: none;background-color: var(--primary);}
input[type="checkbox"]:checked:after{
transform: rotate(45deg) scale(1);}
/* -- 开关按钮 */
input[type="checkbox"].switch{
width: 4em;height: 2em;float: none;cursor: pointer;position: relative;box-sizing: content-box;border-radius: calc(var(--radius) * 10);border: var(--border-width) solid var(--gray);background-color: var(--lighter-gray);transition: border .3s, background-color .3s;}
input[type="checkbox"].switch:before{
margin: 0;border: 0;width: 2em;height: 2em;content: '';display: block;box-shadow: none;background: #fff;position: absolute;transition: transform .3s;border-radius: calc(var(--radius) * 10);}
input[type="checkbox"].switch:after{
content: normal }
input[type="checkbox"].switch:checked{
box-shadow: none;border-color: var(--primary);background-color: var(--primary);}
input.switch:checked:before{
background: #fff;transform: translateX(2em);}
/* 一行表单 */
form .inline label, fieldset.inline label{
display: inline-block;vertical-align: bottom;margin: 0 .75em .75em 0;}
</style>
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
二、html代码
<div class="mythBox mid">
<fieldset>
<label class="required">
<span>单行文本框：</span>
<input type="text" value="我的爱好广泛" />
</label>
<label>
<span>禁用的文本框：</span>
<input type="text" value="我的年龄" disabled="">
</label>
<label>
<span>只读的文本框：</span>
<input type="text" value="我是只读的" readonly="">
</label>
<label>
<span>多行文本框：</span>
<textarea>假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁：一切都是瞬息，一切都将会过去；而那过去了的，就会成为亲切的怀恋。</textarea>
</label>
<label>
<span>数字：</span>
<input type="number" value="5678" />
</label>
<label>
<span>超出数字的文本框：</span>
<input type="number" min="1" max="100" value="101">
</label>
<label>
<span>选择颜色：</span>
<input type="color">
</label>
<label>
<span>单文件：</span>
<input type="file">
</label>
<label>
<span>上传多文件：</span>
<input type="file" multiple="">
</label>
<label>
<span>滑动条：</span>
<input type="range">
</label>
<label>
<span>进度条：</span>
<progress value="10" max="50"></progress>
</label>
<label>
<span>日期形文本框：</span>
<input type="date">
</label>
<label>
<span>日期 + 时间形文本框：</span>
<input type="datetime-local">
</label>
<label>
<input type="checkbox">多选选项
</label>
<label>
<span>性别：</span>
<span style="display:inline-block;"><input type="radio" name="xingbie" value=0"">女</span>
<span style="display:inline-block;"><input type="radio" name="xingbie" value="1">男</span>
</label>
<label>
<span>下来单选框：</span>
<select>
<option>张三</option>
<option>李四</option>
<option>王五</option>
</select>
</label>
<label>
<span>下来多选框：</span>
<select multiple>
<option>张三</option>
<option>李四</option>
<option>王五</option>
</select>
</label>
<label>
<span>开关按钮：</span>
<input type="checkbox" class="switch">
</label>
</fieldset> <br/>
<br/>
<form>
<fieldset>
<legend>多行：</legend>
<label><input type="checkbox" />多选选项 1</label>
<label><input type="checkbox" />多选选项 2</label>
<label><input type="checkbox" />多选选项 3</label>
</fieldset>
<fieldset class="inline">
<legend>单行：</legend>
<label><input type="radio" name="radio" />单选选项 1</label>
<label><input type="radio" name="radio" />单选选项 2</label>
<label><input type="radio" name="radio" />单选选项 3</label>
</fieldset>
<fieldset>
<legend>混搭：</legend>
<div class="row">
<div class="col-4">
<label>
<input type="text" placeholder="名字：" />
</label>
</div>
<div class="col-4">
<label>
<input type="text" placeholder="邮箱：" />
</label>
</div>
<div class="col-4">
<label>
<input type="text" placeholder="网站：" />
</label>
</div>
<div class="col-12">
<label>
<textarea placeholder="在这里留言吧"></textarea>
</label>
</div>
<div class="col-12">
<button class="btn yellow" type="submit">提交</button>
</div>
</div>
</fieldset>
</form>
</div>
这一小节里，我学习了一些表单元素的样式定，收货颇丰，主要实现了单行文本框输入、多行文本框、数字输入框、开关、单选框、多选框、下拉框、进度条、互动条等一些列表单元素的css样式。