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>		  

这一小节里，我学习了一些表单元素的样式定，收货颇丰，主要实现了单行文本框输入、多行文本框、数字输入框、开关、单选框、多选框、下拉框、进度条、互动条等一些列表单元素的css样式。