CSS自学框架之表单

首先我们看一下表单样式，下面共有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>