CSS自学框架之表单

首先我们看一下表单样式,下面共有5张截图




一、CSS代码

csharp 复制代码
/*表单*/
		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代码

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样式。

相关推荐
GISer_Jing6 分钟前
前端面试常考题目详解
前端·javascript
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart