real——表单样式
2024-06-07 12:26:16
<form class="real-form" action=""><div class="real-form-item"><label class="real-form-label">文本框</label><div class="real-input-block"><input class="real-input real-round" type="text" placeholder="圆角样式"></div></div> <div class="real-form-item"><label class="real-form-label">文本框</label><div class="real-input-block"><input class="real-input" type="text" placeholder="直角样式"></div></div> <div class="real-form-item"><label class="real-form-label">开关</label><div class="real-input-block"><input class="real-switch real-blue" type="checkbox" checked="checked" name="checkbox1"></div></div> <div class="real-form-item"><label class="real-form-label">开关2</label><div class="real-input-block"><input class="real-switch real-onoff real-blue" type="checkbox" checked="checked" name="checkbox1"></div></div> <div class="real-form-item"><label class="real-form-label">默认样式上传</label><div class="real-input-block"><span class="real-file real-lit real-blue" style="background: #eee;"> <input type="file"> <span><i></i>默认样式</span> </span></div></div> <div class="real-form-item"><label class="real-form-label">下拉</label><div class="real-input-block"><select class="real-select real-round"><option>选项1</option><option>选项2</option><option>选项3</option></select></div></div> <div class="real-form-item"><label class="real-form-label">单选框</label><div class="real-input-block"><span class="real-radio"> <label> <input type="radio" name="radio1" checked="checked"><em></em> <span>默认样式</span> </label> </span><span class="real-radio real-blue"><label> <input type="radio" name="radio1"><em></em> <span>默认样1</span></label> </span> <span class="real-radio real-blue"> <label><input type="radio" name="radio1"><em></em> <span>默认样式2</span></label> </span></div></div> <div class="real-form-item"><label class="real-form-label">复选框</label><div class="real-input-block"><span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]" checked="checked"><em></em><span>有文字描述1</span></label></span> <span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]"><em></em><span>有文字描述2</span></label></span> <span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]"><em></em><span>有文字描述3</span></label></span></div></div> <div class="real-form-textarea"><label class="real-form-label">多行文本</label><div class="real-input-block"><textarea class="real-text real-ful"></textarea></div></div> </form>
<form class="real-form real-form-pane" action=""><div class="real-form-item"><label class="real-form-label">文本框</label><div class="real-input-block"><input class="real-input real-round" type="text" placeholder="圆角样式"></div></div> <div class="real-form-item"><label class="real-form-label">文本框</label><div class="real-input-block"><input class="real-input" type="text" placeholder="直角样式"></div></div> <div class="real-form-item"><label class="real-form-label">开关</label><div class="real-input-block"><input class="real-switch real-blue" type="checkbox" checked="checked" name="checkbox1"></div></div> <div class="real-form-item"><label class="real-form-label">开关2</label><div class="real-input-block"><input class="real-switch real-onoff real-blue" type="checkbox" checked="checked" name="checkbox1"></div></div> <div class="real-form-item"><label class="real-form-label">默认样式上传</label><div class="real-input-block"><span class="real-file real-lit real-blue" style="background: #eee;"> <input type="file"> <span><i></i>默认样式</span> </span></div></div> <div class="real-form-item"><label class="real-form-label">下拉</label><div class="real-input-block"><select class="real-select real-round"><option>选项1</option><option>选项2</option><option>选项3</option></select></div></div> <div class="real-form-item"><label class="real-form-label">单选框</label><div class="real-input-block"><span class="real-radio"> <label> <input type="radio" name="radio1" checked="checked"><em></em> <span>默认样式</span> </label> </span><span class="real-radio real-blue"><label> <input type="radio" name="radio1"><em></em> <span>默认样1</span></label> </span> <span class="real-radio real-blue"> <label><input type="radio" name="radio1"><em></em> <span>默认样式2</span></label> </span></div></div> <div class="real-form-item"><label class="real-form-label">复选框</label><div class="real-input-block"><span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]" checked="checked"><em></em><span>有文字描述1</span></label></span> <span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]"><em></em><span>有文字描述2</span></label></span> <span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]"><em></em><span>有文字描述3</span></label></span></div></div> <div class="real-form-textarea"><label class="real-form-label">多行文本</label><div class="real-input-block"><textarea class="real-text real-ful"></textarea></div></div> </form>当然还有其他样式
<!----><h1>表单集合演示</h1> <p></p><form class="real-form" action=""><div class="real-form-item"><label class="real-form-label">圆角样式文本框</label><div class="real-input-block"><input class="real-input real-round" type="text" placeholder="real-input real-round"></div></div> <div class="real-form-item"><label class="real-form-label">开关</label><div class="real-input-block"><input class="real-switch real-blue" type="checkbox" checked="checked" name="checkbox1"></div></div> <div class="real-form-item"><label class="real-form-label">开关2</label><div class="real-input-block"><input class="real-switch real-onoff real-blue" type="checkbox" checked="checked" name="checkbox1"></div></div> <div class="real-form-item"><label class="real-form-label">默认样式上传</label><div class="real-input-block"><span class="real-file real-lit real-blue" style="background: #eee;"> <input type="file"> <span><i></i>默认样式</span> </span></div></div> <div class="real-form-item"><label class="real-form-label">下拉</label><div class="real-input-block"><select class="real-select real-round"><option>选项1</option><option>选项2</option><option>选项3</option></select></div></div> <div class="real-form-item"><label class="real-form-label">单选框</label><div class="real-input-block"><span class="real-radio"> <label> <input type="radio" name="radio1" checked="checked"><em></em> <span>默认样式</span> </label> </span><span class="real-radio real-blue"><label> <input type="radio" name="radio1"><em></em> <span>默认样1</span></label> </span> <span class="real-radio real-blue"> <label><input type="radio" name="radio1"><em></em> <span>默认样式2</span></label> </span></div></div> <div class="real-form-item"><label class="real-form-label">复选框</label><div class="real-input-block"><span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]" checked="checked"><em></em><span>有文字描述1</span></label></span> <span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]"><em></em><span>有文字描述2</span></label></span> <span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]"><em></em><span>有文字描述3</span></label></span></div></div> <div class="real-form-textarea"><label class="real-form-label">多行文本</label><div class="real-input-block"><textarea class="real-text real-ful"></textarea></div></div> </form><form class="real-form real-form-pane" action=""><div class="real-form-item"><label class="real-form-label">文本框</label><div class="real-input-block"><input class="real-input real-round" type="text" placeholder="圆角样式"></div></div> <div class="real-form-item"><label class="real-form-label">文本框</label><div class="real-input-block"><input class="real-input" type="text" placeholder="直角样式"></div></div> <div class="real-form-item"><label class="real-form-label">开关</label><div class="real-input-block"><input class="real-switch real-blue" type="checkbox" checked="checked" name="checkbox1"></div></div> <div class="real-form-item"><label class="real-form-label">开关2</label><div class="real-input-block"><input class="real-switch real-onoff real-blue" type="checkbox" checked="checked" name="checkbox1"></div></div> <div class="real-form-item"><label class="real-form-label">默认样式上传</label><div class="real-input-block"><span class="real-file real-lit real-blue" style="background: #eee;"> <input type="file"> <span><i></i>默认样式</span> </span></div></div> <div class="real-form-item"><label class="real-form-label">下拉</label><div class="real-input-block"><select class="real-select real-round"><option>选项1</option><option>选项2</option><option>选项3</option></select></div></div> <div class="real-form-item"><label class="real-form-label">单选框</label><div class="real-input-block"><span class="real-radio"> <label> <input type="radio" name="radio1" checked="checked"><em></em> <span>默认样式</span> </label> </span><span class="real-radio real-blue"><label> <input type="radio" name="radio1"><em></em> <span>默认样1</span></label> </span> <span class="real-radio real-blue"> <label><input type="radio" name="radio1"><em></em> <span>默认样式2</span></label> </span></div></div> <div class="real-form-item"><label class="real-form-label">复选框</label><div class="real-input-block"><span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]" checked="checked"><em></em><span>有文字描述1</span></label></span> <span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]"><em></em><span>有文字描述2</span></label></span> <span class="real-checkbox"><label><input type="checkbox" name="checkbox1[]"><em></em><span>有文字描述3</span></label></span></div></div> <div class="real-form-textarea"><label class="real-form-label">多行文本</label><div class="real-input-block"><textarea class="real-text real-ful"></textarea></div></div> </form><!--单选框--><h1>单选框</h1><form class="real-form real-form-pane" action=""><div class="real-form-item"><label class="real-form-label">默认单选框</label><div class="real-input-block"><span class="real-radio"> <label> <input type="radio" name="radio1"><em></em> <span>默认样式</span> </label> </span> <span class="real-radio real-blue"> <label> <input type="radio" name="radio1"><em></em><span>蓝色</span> </label> </span> <span class="real-radio real-red"> <label> <input type="radio" name="radio1"><em></em><span>红色</span> </label> </span> <span class="real-radio real-yellow"> <label> <input type="radio" name="radio1"><em></em><span>黄色</span> </label> </span> <span class="real-radio real-green"> <label> <input type="radio" name="radio1"><em></em><span>绿色</span> </label> </span><span class="real-radio real-black"> <label> <input type="radio" name="radio1"><em></em><span>黑色</span> </label> </span></div></div> <div class="real-form-item"><label class="real-form-label">按钮样式单选框</label><div class="real-input-block"><div class="real-RadioStyle"> <input type="radio" name="Storage" id="model1"> <label for="model1">iPhone 6s</label> </div><div class="real-RadioStyle"> <input type="radio" name="Storage" id="model2"> <label for="model2">iPhone 6s Plus</label> </div><div class="real-RadioStyle"> <input type="radio" name="Storage" id="model3"> <label for="model3">iPhone 7</label> </div><div class="real-RadioStyle"> <input type="radio" name="Storage" id="model4" checked=""> <label for="model4">iPhone 7 Plus</label> </div></div></div> <div class="real-form-item"><label class="real-form-label">选中后文字也一起变色</label><div class="real-input-block"><span class="real-radio"> <label> <input type="radio" name="radio2" checked="checked"><em></em><span>默认</span> </label> </span><span class="real-radio real-blue2"> <label><input type="radio" name="radio2"><em></em><span>蓝色</span> </label></span> <span class="real-radio real-red2"><label><input type="radio" name="radio2"><em></em><span>红色</span> </label> </span> <span class="real-radio real-yellow2"><label><input type="radio" name="radio2"><em></em><span>黄色</span> </label> </span> <span class="real-radio real-green2"><label><input type="radio" name="radio2"><em></em><span>绿色</span> </label> </span> <span class="real-radio real-black2"><label><input type="radio" name="radio2"><em></em><span>黑色</span> </label> </span></div></div> </form> <!--单选框结束--><!--复选框--><h1>复选框</h1><form class="real-form real-form-pane" action=""><div class="real-form-item"><label class="real-form-label">按钮样式</label><div class="real-input-block"><div class="real-RadioStyle"><input type="checkbox" id="love1"><label for="love1">女</label><input type="checkbox" id="love2"><label for="love2">绘画</label><input type="checkbox" id="love3"><label for="love3">摄影</label><input type="checkbox" id="love4" checked=""><label for="love4">骑行</label></div></div></div> <div class="real-form-item"><label class="real-form-label">普通样式</label><div class="real-input-block"><span class="real-checkbox"><label><input type="checkbox" checked="checked"><em></em></label></span><span class="real-checkbox real-blue"><label><input type="checkbox" checked="checked"><em></em></label></span><span class="real-checkbox real-red"><label><input type="checkbox" checked="checked"><em></em></label></span><span class="real-checkbox real-yellow"> <label> <input type="checkbox" checked="checked"><em></em> </label> </span> <span class="real-checkbox real-green"><label><input type="checkbox" checked="checked"><em></em></label></span><span class="real-checkbox real-black"><label><input type="checkbox" checked="checked"><em></em></label></span></div></div> <div class="real-form-item"><label class="real-form-label">有文字描述</label><div class="real-input-block"><span class="real-checkbox"><label><input type="checkbox" checked="checked"><em></em><span>默认</span> </label> </span> <span class="real-checkbox real-blue"><label><input type="checkbox" checked="checked"><em></em><span>蓝色</span> </label> </span><span class="real-checkbox real-red"><label><input type="checkbox" checked="checked"><em></em><span>红色</span></label></span> <span class="real-checkbox real-yellow"><label><input type="checkbox" checked="checked"><em></em><span>黄石</span> </label> </span> <span class="real-checkbox real-green"><label><input type="checkbox" checked="checked"><em></em><span>绿色</span> </label> </span> <span class="real-checkbox real-black"><label><input type="checkbox" checked="checked"><em></em><span>黑色</span> </label> </span></div></div> <div class="real-form-item"><label class="real-form-label">选中后文字也一起变色</label><div class="real-input-block"><span class="real-checkbox"><label><input type="checkbox" checked="checked"><em></em><span>默认</span> </label></span><span class="real-checkbox real-blue2"><label><input type="checkbox" checked="checked"><em></em><span>蓝色</span> </label> </span> <span class="real-checkbox real-red2"><label><input type="checkbox" checked="checked"><em></em><span>红色</span> </label></span> <span class="real-checkbox real-yellow2"><label><input type="checkbox" checked="checked"><em></em><span>黄石</span> </label> </span><span class="real-checkbox real-green2"><label><input type="checkbox" checked="checked"><em></em><span>绿色</span> </label> </span><span class="real-checkbox real-black2"><label><input type="checkbox" checked="checked"><em></em><span>黑色</span> </label> </span></div></div> </form> <!--复选框结束--><!--开关--><h1>开关</h1><form class="real-form real-form-pane" action=""><div class="real-form-item"><label class="real-form-label">带ON/OFF文字</label><div class="real-input-block"><input class="real-switch real-onoff" type="checkbox"><input class="real-switch real-onoff" type="checkbox" checked="checked"></div></div> <div class="real-form-item"><label class="real-form-label">普通样式</label><div class="real-input-block"><input class="real-switch" type="checkbox"><input class="real-switch" type="checkbox" checked="checked"></div></div> <div class="real-form-item"><label class="real-form-label">自定义文字描述</label><div class="real-input-block"><span class="real-switch-tip"><label><input type="checkbox"><em></em><span>是否发射核弹</span><span>发射！！</span> </label> </span> <span class="real-switch-tip"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射！！</span> </label> </span></div></div> <div class="real-form-item"><label class="real-form-label">其他颜色</label><div class="real-input-block"><input class="real-switch real-blue" type="checkbox" checked="checked"><input class="real-switch real-red" type="checkbox" checked="checked"><input class="real-switch real-yellow" type="checkbox" checked="checked"><input class="real-switch real-green" type="checkbox" checked="checked"><input class="real-switch real-black" type="checkbox" checked="checked"><input class="real-switch real-onoff real-blue" type="checkbox" checked="checked"><input class="real-switch real-onoff real-red" type="checkbox" checked="checked"><input class="real-switch real-onoff real-yellow" type="checkbox" checked="checked"><input class="real-switch real-onoff real-green" type="checkbox" checked="checked"><input class="real-switch real-onoff real-black" type="checkbox" checked="checked"><span class="real-switch-tip real-blue"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射！！</span> </label> </span> <span class="real-switch-tip real-red"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射！！</span> </label> </span> <span class="real-switch-tip real-yellow"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射！！</span> </label> </span> <span class="real-switch-tip real-green"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射！！</span> </label> </span> <span class="real-switch-tip real-black"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射！！</span> </label> </span></div></div></div> </form> <!--开关结束--><!--文本框--><h1>文本框</h1><form class="real-form real-form-pane" action=""><div class="real-form-item"><label class="real-form-label">圆角样式文本框</label><div class="real-input-block"><input class="real-input real-round" type="text" placeholder="real-input real-round"></div></div> <div class="real-form-item"><label class="real-form-label">直角样式文本框</label><div class="real-input-block"><input class="real-input" type="text" placeholder="real-input"></div></div> <div class="real-form-item"><label class="real-form-label">文本框下划线</label><div class="real-input-block"><input class="real-input real-under" type="text" placeholder="real-input real-under"></div></div> <div class="real-form-item"><label class="real-form-label">只读文本框下划线</label><div class="real-input-block"><input class="real-input real-readonly" type="text" placeholder="类=real-input real-readonly，加只读属性readonly " readonly="readonly"> </div></div> </form> <!--文本框结束--><!--下拉框--><h1>下拉框</h1><form class="real-form real-form-pane" action=""><div class="real-form-item"><label class="real-form-label">普通下拉</label><div class="real-input-block"><select class="real-select real-round"><option>圆角样式</option><option>选项2</option><option>选项3</option></select></div></div> <div class="real-form-item"><label class="real-form-label">黑色样式</label><div class="real-input-block"><select class="real-select real-black real-round"><option>黑色样式</option><option>选项2</option><option>选项3</option></select></div></div> </form> <!--下拉框--><!--上传--><style></style><h1>上传</h1><form class="real-form real-form-pane" action=""><div class="real-form-item"><label class="real-form-label">默认样式</label><div class="real-input-block"><div class="real-file"> <input type="file"><span><i></i>默认样式</span> </div></div></div> <div class="real-form-item"><label class="real-form-label">尺寸</label><div class="real-input-block"><span class="real-file real-lit"><input type="file"><span><i></i>小尺寸</span></span><span class="real-file real-lit real-blue"><input type="file"><span><i></i>小尺寸</span></span></div></div> <div class="real-form-item"><label class="real-form-label">其他颜色</label><div class="real-input-block"><span class="real-file real-blue"><input type="file"><span><i style="color:#fff"></i>蓝色样式</span></span><span class="real-file real-red"><input type="file"><span><i></i>红色样式</span></span> <span class="real-file real-yellow"><input type="file"><span><i></i>黄色样式</span></span><span class="real-file real-green"> <input type="file"><span><i></i>绿色样式</span></span><span class="real-file real-black"><input type="file"><span><i></i>黑色样式</span></span></div></div> <div class="real-form-item"><label class="real-form-label">无图标样式</label><div class="real-input-block"><div class="real-file real-blue"> <input type="file"><span>无图标样式</span> </div> </div></div> <div class="real-form-item"><label class="real-form-label">自定义图片样式</label><div class="real-input-block"><div class="real-file real-blue"> <input type="file"><span><img src="css/img.png">自定义图片样式</span> </div></div></div> </form> <!--上传结束-->
.real-form-item {margin-bottom: 15px;clear: both;*zoom: 1;
}
.real-form-item:after {content: '\20';clear: both;*zoom: 1;display: block;height: 0;
}label {cursor: pointer;line-height: 1.6;color: rgba(0,0,0,.85);font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
label {cursor: pointer;
}label {cursor: default;
}.real-form-label {float:left;display:block;padding:9px 15px;width:80px;font-weight:400;line-height:20px;text-align:right
}.real-form-label-col {display:block;float:none;padding:9px 0;line-height:20px;text-align:left
}.real-input-block {margin-left: 110px;min-height: 36px;
}.real-form-pane .real-form-label {width:110px;padding:8px 15px;height:38px;line-height:20px;border-width:1px;border-style:solid;border-radius:2px 0 0 2px;text-align:center;background-color:#FAFAFA;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-color: #eee;box-sizing:border-box;
}
.real-form-pane .real-input-inline {margin-left:-1px
}.real-form-pane .real-input-block {margin-left:110px;left:-1px
}.real-form-pane .real-input-block input{border:1px solid #eee;
} .real-form-textarea .real-form-label {display:block;padding:9px 15px;width:100%;font-weight:400;line-height:20px;text-align:left
}
.real-form-textarea .real-input-block {width:100%;max-width: 100%;margin-left: 0px !important;}input, textarea, select, button {outline:none;border: #eee;
}
.real-input, .real-text {border:1px solid #bebebe;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px;color:#333;border-width: 1px;border-style: solid;height: 38px;line-height: 1.3;line-height: 38px\9;border-width: 1px;border-style: solid;background-color: #fff;color: rgba(0,0,0,.85);border-radius: 2px;
}/*width:200px;*/
}
.real-input, .real-text, .real-select {-webkit-transition:0.2s ease-in;transition:0.2s ease-in;transition-property:box-shadow;
}
.real-input {transition-property:box-shadow, border-color;
}
.real-input::-webkit-input-placeholder, .real-text::-webkit-input-placeholder {color:#a9a9a9;
}
.real-input {height:38px;padding:0 8px;
}
input,textarea ,select { width:100%;
}input[type="checkbox"] { float: left;
}
.real-checkbox,.real-radio{float: left;
}
.real-text {height:80px;padding:4px 8px;line-height:20px;
}
.real-input.real-under, .real-text.real-under {border-top:0;border-left:0;border-right:0;border-bottom:1px solid #bebebe;background:transparent;
}
.real-input:focus, .real-text:focus, .real-select:hover {border-color:#7a9cd3;box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(122, 156, 211, 0.6);
}
.real-input.real-under:focus, .real-text.real-under:focus {border-color:#7a9cd3;-webkit-box-shadow:inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);box-shadow:inset 0 0 0 rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0);
}
.real-input.real-round, .real-text.real-round, .real-button.real-round, .real-select.real-round, .real-table.real-round, .real-tablein.real-round table {-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}
.real-input.real-readonly {background:#eee;cursor:not-allowed;color:#a9a9a9;
}
.real-input.real-readonly:focus {border-color:#bebebe;box-shadow:inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
}label {cursor:pointer;
}
input, textarea, select, button {outline:none;
}
.real-input, .real-text {border:1px solid #bebebe;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px;color:#333;/*width:200px;*/
}
.real-input, .real-text, .real-select {-webkit-transition:0.2s ease-in;transition:0.2s ease-in;transition-property:box-shadow;
}
.real-input {transition-property:box-shadow, border-color;
}
.real-input::-webkit-input-placeholder, .real-text::-webkit-input-placeholder {color:#a9a9a9;
}
.real-input {height:38px;padding:0 8px;
}
input,textarea ,select { width:100%;
}input[type="checkbox"] { float: left;
}
.real-checkbox,.real-radio{float: left;
}
.real-text {height:80px;padding:4px 8px;line-height:20px;
}
.real-input.real-under, .real-text.real-under {border-top:0;border-left:0;border-right:0;border-bottom:1px solid #bebebe;background:transparent;
}
.real-input:focus, .real-text:focus, .real-select:hover {border-color:#7a9cd3;box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(122, 156, 211, 0.6);
}
.real-input.real-under:focus, .real-text.real-under:focus {border-color:#7a9cd3;-webkit-box-shadow:inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);box-shadow:inset 0 0 0 rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0);
}.real-input.real-ful, .real-text.real-ful, .real-button.real-ful, .real-select.real-ful {width:100%;
}
.real-input.real-round, .real-text.real-round, .real-button.real-round, .real-select.real-round, .real-table.real-round, .real-tablein.real-round table {-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}
.real-input.real-readonly {background:#eee;cursor:not-allowed;color:#a9a9a9;
}
.real-input.real-readonly:focus {border-color:#bebebe;box-shadow:inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
}
.real-select {/*width:200px;*/height:38px;border:1px solid #bebebe;padding:0 16px 0 6px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:0;appearance:none;-moz-appearance:none;-webkit-appearance:none;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAEAQMAAABvKif3AAAABlBMVEUAAABAQEBTWDqaAAAAAXRSTlMAQObYZgAAABRJREFUCNdj+MfAUMPAYMHAIMAAABAOAcNSkrYcAAAAAElFTkSuQmCC");background-repeat:no-repeat;background-position:right center;background:#fff;
}
.real-select.real-black {background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAEAQMAAABvKif3AAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABRJREFUCNdj+MfAUMPAYMHAIMAAABAOAcNSkrYcAAAAAElFTkSuQmCC");background:#333;border-color:#333;color:#fff;
}/*label*/
/*inline*/
/*item label*/
/* @media screen and (max-width:450px)*//*real-button-lit*/.real-file.real-lit {height:38px;min-width:58px;
}
.real-button.real-lit, .real-file.real-lit span {height:38px;font-size:12px;padding:0 12px;min-width:58px;
}
.real-file.real-lit i, .real-file.real-lit img {position:relative;top:-1px;
}
/*****表单控件*****//*****单选框*****/.real-clear {clear: both}
.real-RadioStyle input {display: none}
.real-RadioStyle label {border: 1px solid #CCC;color: #666;padding: 2px 10px 2px 5px;line-height: 28px;min-width: 80px;text-align: center;float: left;margin: 2px;border-radius: 4px}.real-radio {height:20px;line-height:20px;position:relative;font-size:14px;margin-bottom:10px;
}
.real-radio:last-child {margin-bottom:0;
}
span.real-radio {display:inline-block;margin-bottom:0;margin-right:18px;vertical-align:top;
}
.real-radio label span {margin-left:26px;color:#333;
}
.real-radio label input[type="radio"] {position:absolute;z-index:-1;width:0;height:0;overflow:hidden;visibility:hidden;opacity:0;
}
.real-radio label em {display:block;width:20px;height:20px;border-radius:50%;border:1px solid #ddd;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;top:0;left:0;-webkit-transition:0.1s ease-in;transition:0.1s ease-in;-webkit-transition-property:border-color, background;transition-property:border-color, background;
}
.real-radio label, .real-radio label span {height:20px;line-height:20px;display:inline-block;
}
.real-radio label input[type="radio"]:checked + em {border-color:#696969;background:#696969;background-clip:content-box;padding:4px;
}
.real-radio.real-blue label input[type="radio"]:checked + em, .real-radio.real-blue2 label input[type="radio"]:checked + em {border-color:#409eff;background:#409eff;background-clip: content-box;
}
.real-radio.real-red label input[type="radio"]:checked + em, .real-radio.real-red2 label input[type="radio"]:checked + em {border-color:#f56c6c;background:#f56c6c;background-clip: content-box;
}
.real-radio.real-yellow label input[type="radio"]:checked + em, .real-radio.real-yellow2 label input[type="radio"]:checked + em {border-color:#f4c044;background:#f4c044;background-clip: content-box;
}
.real-radio.real-green label input[type="radio"]:checked + em, .real-radio.real-green2 label input[type="radio"]:checked + em {border-color:#5cb85c;background:#5cb85c;background-clip: content-box;
}
.real-radio.real-black label input[type="radio"]:checked + em, .real-radio.real-black2 label input[type="radio"]:checked + em {border-color:#222222;background:#222222;background-clip: content-box;
}
.real-radio.real-blue2 label input[type="radio"]:checked + em + span {color:#409eff;
}
.real-radio.real-red2 label input[type="radio"]:checked + em + span {color:#f56c6c;
}
.real-radio.real-yellow2 label input[type="radio"]:checked + em + span {color:#f4c044;
}
.real-radio.real-green2 label input[type="radio"]:checked + em + span {color:#5cb85c;
}
.real-radio.real-black2 label input[type="radio"]:checked + em + span {color:#222222;
}
/*****单选框*****//*****复选框*****/
.real-RadioStyle input:checked + label {background: url(../img/ico_checkon.svg) no-repeat right bottom;border: 1px solid #00a4ff;background-size: 21px 21px;color: #00a4ff}
.real-RadioStyle input:disabled + label {opacity: 0.7;}.real-checkbox {min-width:20px;height:20px;line-height:20px;position:relative;font-size:14px;margin-bottom:10px;
}
.real-checkbox:last-child {margin-bottom:0;
}
span.real-checkbox {display:inline-block;margin-bottom:0;margin-right:18px;vertical-align:top;
}
span.real-checkbox:last-child {margin-right:0;
}
.real-checkbox label span {margin-left:26px;color:#333;
}
.real-checkbox label input[type="checkbox"] {position:absolute;z-index:-1;width:0;height:0;overflow:hidden;visibility:hidden;opacity:0;
}
.real-checkbox label em {display:block;width:20px;height:20px;border-radius:4px;border:1px solid #ddd;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;top:0;left:0;-webkit-transition:0.1s ease-in;transition:0.1s ease-in;-webkit-transition-property:border-color, background;transition-property:border-color, background;
}
.real-checkbox label em:before, .real-checkbox label em:after {content:"";display:block;position:absolute;background:#fff;
}
.real-checkbox label em:before {width:6px;height:2px;-webkit-transform:rotate(45deg);transform:rotate(45deg);top:10px;left:3px;
}
.real-checkbox label em:after {width:10px;height:2px;-webkit-transform:rotate(128deg);transform:rotate(128deg);top:8px;left:6px;
}
.real-checkbox label, .real-checkbox label span {height:20px;line-height:20px;display:inline-block;
}
.real-checkbox label input[type="checkbox"]:checked + em {border-color:#696969;background:#696969;
}
.real-checkbox.real-blue label input[type="checkbox"]:checked + em, .real-checkbox.real-blue2 label input[type="checkbox"]:checked + em {border-color:#409eff;background:#409eff;
}
.real-checkbox.real-red label input[type="checkbox"]:checked + em, .real-checkbox.real-red2 label input[type="checkbox"]:checked + em {border-color:#f56c6c;background:#f56c6c;
}
.real-checkbox.real-yellow label input[type="checkbox"]:checked + em, .real-checkbox.real-yellow2 label input[type="checkbox"]:checked + em {border-color:#f4c044;background:#f4c044;
}
.real-checkbox.real-green label input[type="checkbox"]:checked + em, .real-checkbox.real-green2 label input[type="checkbox"]:checked + em {border-color:#5cb85c;background:#5cb85c;
}
.real-checkbox.real-black label input[type="checkbox"]:checked + em, .real-checkbox.real-black2 label input[type="checkbox"]:checked + em {border-color:#222222;background:#222222;
}
.real-checkbox.real-blue2 label input[type="checkbox"]:checked + em + span {color:#409eff;
}
.real-checkbox.real-red2 label input[type="checkbox"]:checked + em + span {color:#f56c6c;
}
.real-checkbox.real-yellow2 label input[type="checkbox"]:checked + em + span {color:#f4c044;
}
.real-checkbox.real-green2 label input[type="checkbox"]:checked + em + span {color:#5cb85c;
}
.real-checkbox.real-black2 label input[type="checkbox"]:checked + em + span {color:#222222;
}
/*****复选框*****//*****开关*****//*默认样式*/.real-switch {position:relative;-webkit-touch-callout:none;cursor:pointer;overflow:hidden;width:42px;height:24px;border:1px solid #dddddd;border-radius:13px;-webkit-appearance:none;-webkit-user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:#dcdfe6;
}
.real-switch:before {content:"";width:22px;height:22px;line-height:24px;text-transform:uppercase;position:absolute;top:0;left:0;border-radius:50%;-webkit-border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:0.2s ease-in;transition:0.2s ease-in;-webkit-transition-property:background, left;transition-property:background, left;
}
.real-switch:checked {border-color:#696969;background:#696969;color:#fff;
}
.real-switch:checked:before {left:20px;
}
.real-switch.real-onoff {width:64px;
}
.real-switch.real-onoff:before {content:"OFF";text-indent:27px;
}
.real-switch.real-onoff:checked:before {content:"ON";left:40px;text-indent:-28px;
}
.real-switch.real-blue:checked {border-color:#409eff;background:#409eff;
}
.real-switch.real-red:checked {border-color:#f56c6c;background:#f56c6c;
}
.real-switch.real-yellow:checked {border-color:#f4c044;background:#f4c044;
}
.real-switch.real-green:checked {border-color:#5cb85c;background:#5cb85c;
}
.real-switch.real-black:checked {border-color:#222222;background:#222222;
}
/*自定义文字描述*/.real-switch-tip {display:inline-block;height:24px;position:relative;margin-bottom:10px;
}
.real-switch-tip:last-child {margin-bottom:0;
}
span.real-switch-tip {margin-bottom:0;margin-right:10px;vertical-align:top;
}
span.real-switch-tip:last-child {margin-right:0;
}
div.real-switch-tip {display:table;
}
.real-switch-tip label, .real-switch-tip span {height:24px;display:block;
}
.real-switch-tip span {font-size:12px;min-width:24px;text-align:center;line-height:24px;padding-left:28px;padding-right:12px;color:#999;position:relative;z-index:2;overflow-y:hidden;
}
.real-switch-tip span + span {display:none;
}
.real-switch-tip input[type="checkbox"] {position:absolute;z-index:-1;width:0;height:0;overflow:hidden;visibility:hidden;opacity:0;
}
.real-switch-tip label em {-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:15px;border:1px solid #ddd;position:absolute;top:0;left:0;width:100%;height:24px;z-index:1;
}
.real-switch-tip label em:after {content:"";display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);position:absolute;top:0;left:0;-webkit-box-sizing:border-box;box-sizing:border-box;
}
.real-switch-tip label input[type="checkbox"]:checked + em {border-color:#696969;background:#696969;
}
.real-switch-tip label input[type="checkbox"]:checked + em:after {left:auto;right:0;background:#fff;
}
.real-switch-tip label input[type="checkbox"]:checked + em + span, .real-switch-tip label input[type="checkbox"]:checked + em + span + span {padding-left:12px;padding-right:28px;color:#fff;
}
.real-switch-tip label input[type="checkbox"]:checked + em + span {display:none;
}
.real-switch-tip label input[type="checkbox"]:checked + em + span + span {display:block;
}
.real-switch-tip label input[type="checkbox"]:checked + em + span:after {content:"ON";
}
.real-switch-tip span, .real-switch-tip label em, .real-switch-tip label em:after {-webkit-transition:0.2s ease-in;transition:0.2s ease-in;-webkit-transition-property:border-color, background;transition-property:border-color, background;
}
.real-switch-tip.real-blue label input[type="checkbox"]:checked + em {border-color:#409eff;background:#409eff;
}
.real-switch-tip.real-red label input[type="checkbox"]:checked + em {border-color:#f56c6c;background:#f56c6c;
}
.real-switch-tip.real-yellow label input[type="checkbox"]:checked + em {border-color:#f4c044;background:#f4c044;
}
.real-switch-tip.real-green label input[type="checkbox"]:checked + em {border-color:#5cb85c;background:#5cb85c;
}
.real-switch-tip.real-black label input[type="checkbox"]:checked + em {border-color:#222222;background:#222222;
}
/*****开关*****//*****上传控件*****/.real-file {float: left;display:inline-block;height:36px;position:relative;margin-bottom:10px;cursor:pointer;
}
.real-file:last-child {margin-bottom:0;
}
span.real-file {margin-bottom:0;margin-right:10px;vertical-align:top;
}
span.real-file:last-child {margin-right:0;
}
div.real-file {display:table;
}
.real-file input[type="file"] {width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;font-size:0;cursor:pointer;z-index:2;
}.real-file span {-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;vertical-align:middle;padding:0 15px;height:36px;line-height:36px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-size:14px;position:relative;z-index:1;
}
/*.real-file i, .real-file img {height:18px; display:inline-block; vertical-align:middle; overflow:hidden; margin-right:6px;}*/.real-file i, .real-file img {height:20px;line-height:20px;display:inline-block;vertical-align:middle;margin-right:6px;
}
.real-file i {transform:translateY(-1px);
}
.real-file img {transform:translateY(-2px);
}
.real-file i {min-width:20px;font-size:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAjVBMVEUAAAAiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiLrJpnlAAAALnRSTlMA9gOr6PrJEQ3zY9nTvrWkiX1oTz06Mi0mHBft4Z+YlpKFgW5dCN25sHhFV0QkMVMqTAAAAgtJREFUSMftldtyskAQhIeFhQgeOCMQQIjGQ5J+/8f7Z1HUuBbhv0xVvgutmra3Z4pZpD80MrdeMrWbTTQk5gzArP8wkwmGF9+Awrh8+S8/OfIFGGlXXVfZEswiH3c4tjq5SQUxIm1UlO2MOcQKwDy+FeI5F1ZixLJVhxb3lULFbkdG9wArfxjOAryX0RD3seiOxOycJQ+y08o8ztLZ6XPH7cLjFhCQRsBly1u0sbivnha4cNItp0Fb3ETRYuDd0S3O+1Vuh6AGKroKP9wge7qlgfsRVhaY5lzp1P51+Y+r1KlF7frFlRwR0wRiDpIJD7IHjE+axKcB7AWlHOLTRHyOSenIbRVTLQW3dqQDYNJkTOBAtnrikwkAmzwgfKKJKBKkEwKeSjk+0TaGsSGdo0pZApUuvaEs8abXK2BJLfCq3aBIwrIgI+0OvgItxYB2XFJCWVAmWjgQ085mef1NWPNZysL5DwLX7B03wdL8Xirmak8ta6aE4t6hhL7ZWh23Fdd+1XXzV4ax8tW1us4ptiq8Pv9mD8YOojRbX/o9CGURh8uc6yyNAhvM/nKCs0KPlMZGkNu/H03DMPt3p0tiY0iJnpVze6jDXZ05JEK/oLOFCj8U5MyGW/5tTRzX9EopJacoBouCU1goPdN1tMeUp0kmSLeQyJI0H/nP0CwDv9fSAM1/Wr7q+ov+eMI/GuVEnRAec4IAAAAASUVORK5CYII=");background-repeat:no-repeat;background-size:100% 100%;
}
.real-file.real-blue i, .real-file.real-red i, .real-file.real-yellow i, .real-file.real-green i, .real-file.real-black i {background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAk1BMVEUAAADROyVeAAAAMHRSTlMA9qv6ApcZ8+rmtWMlEg8G2dPIu6SJhGhPPToL7t7Jn5KAfW5dRDEu4cB4HstXNCpvk6ktAAACBElEQVRIx+3U25aiMBAF0AMJKCKCInfvraBtX87/f90QBKc1PTSvs1bvB3ioVakUVIJfmk/XmtQs9xPD5OaI5Kh5mPmAhCIyqBjtKyrwAztkTWy2+/12I1gLbfTyFmplq/RR80tLlVp46CGXJOcZ7rI5yaXsSTmqRe2HjaqyR/zTLCCdKx5cHTKY9RZx8cTtKVPMJuTcxxN/Tk5mhd53Fl8Ch+QBmgNJJ7jE2cNXOF3YOkFzYuvyNyhjdtYeNN6anbgrZFGV3ibv7qHCN6qD+55sHdYsNPZq/mL7x1GK1aDum8EVpJNhgMwhRQ7IkDROGORkkKFEKcgIA0WkKPFKjm0MZI/JV0xIE4OZ5AQb9RUG25MbBGQCnZ+mPnQJGeBN7U63M4wdNKrzN9XLFpoXrlZ8gWareonJtXaCUsHxmCLVzuCajJGR2nL5iiqFq1wrTmbwN6QzfQhMz7yl8PwUcMiND6Qk519D9lzN6Xg8UgH7a4YKpN3sn4/+fb8hyWhpGMuIZHjv0z+e79NfhKwtDulHNW33a0qVIs22z2n1kR4WVCsU7bpLNoQwdhJucz+ahmE2d6cLuTOEYGM5QyfpzurIg0wiG7cU2FEi4Y26U/4wJp5rBishRF1F6VKUukodWAWm62nX2LXMKwk9BbLKy2uBHlrKzf+bYnU/eripZU3x6xt/AO1sSHEnY+LbAAAAAElFTkSuQmCC");
}
.real-file i[class^="icon-"], .real-file i[class*=" icon-"], .real-file i[class^="ico-"], .real-file i[class*=" ico-"], .real-file i[class^="ion-"], .real-file i[class*=" ion-"], .real-file i[class^="glyphicon-"], .real-file i[class*=" glyphicon-"], .real-file i[class^="fa-"], .real-file i[class*=" fa-"], .real-file i[class^="ti-"], .real-file i[class*=" ti-"], .real-file i[class^="zmdi-"], .real-file i[class*=" zmdi-"], .real-file i[class^="wi-"], .real-file i[class*=" wi-"] {background-image:none;
}
.real-file.real-blue{background: #268ef9;color: #fff;border-radius: 8px;}
.real-file.real-red{background: #d83c3c;color: #fff;border-radius: 8px;}
.real-file.real-yellow{background: #f4c044;color: #fff;border-radius: 8px;}
.real-file.real-green{background: #5cb85c;color: #fff;border-radius: 8px;}
.real-file.real-black{background: #222222;color: #fff;border-radius: 8px;}/*****上传控件*****//*表单结束*/
real——表单样式相关推荐
- 还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...
- 1-17. Bootstrap 表单样式汇总
网站数据交互一般都是通过表单实现 Bootstrap中表单布局类型有哪些? 垂直表单 内联表单 水平表单 向父 <form> 元素添加 role="form" 把标签和 ...
- 用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式 第6章 CSS设置表格与表单样式 学习目标 什么是表格模型 对数据表格应用样式. 创建简单和复杂的表单布局 对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
- 精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式 表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
- css美化表格和表单样式
Css美化表格和表单样式 表格创建默认是没有边框的,我们要用boder属性去设置表格的边框 表格基本样式 表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...
- jquery表单样式
使用jquery做的表单样式,有隔行变色.点击换色.选中换色等等 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...
- java 表单_Java报表表单设计之表单样式设计
阅读提示: 文章中与FineReport软件使用的相关内容,基于软件的V7.0旧版本编写,不代表软件最新的使用方式. FineReport最新版免费试用:https://www.finereport. ...
- html flex 表单样式,Flexbox 布局的最简单表单的实现
弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇 教程 ,才意识到一 ...
- file html5 样式,CSS小技巧之自定义个性的file表单样式
每当看到别人家的东西,总是那么的优美,他们的是这样的: 再想想自己家的是这样的. 样式没个性就算了,还那么多的废字,今天我们分享的就是如何把file表单做的漂亮些,废话不多说,直接进入正题. 其实当初 ...
最新文章
- 前端面试题整理（定期更新）
- AI十年进阶：一段算法能力演进的历史
- deepin安装kde桌面 无法进入_通过远程桌面vnc安装不上，通过远程桌面vnc安装不上无法使用是因为什么？怎么解决...
- uva1471 二叉搜索树
- gedit乱码 fedora
- 单片机小白学步系列（十八） 单片机/计算机系统概述：通信接口与协议
- C++笔记-DLL的编写与调用
- 3006基于二叉链表的二叉树最长路径的求解（附思路）
- unity场景素材_[游戏素材]游戏场景环境天气变化Unity游戏素材资源
- 敏捷开发智慧敏捷系列之六：之一～之五的小结
- 【Python】Python中文编码
- ios 配置java环境变量_Ios 入门 ----基本的控件
- 以太网安全技术ACL原理+配置
- 微信小程序云开发：上传图片、视频到云存储指定目录并渲染到页面上
- java基础总结(七十)--Java8中的parallelStream的坑
- java实现捕鱼达人
- python实现单机斗地主手机版下载_单机斗地主(单机版)无需网络下载
- vue中将水印加在页面的某一部分
- 加速度传感器灵敏度的几种表示方式
- After Effects CC SDK 使用指南（二）—— 第一章 介绍 （上）
热门文章
- Jmockit使用指南
- 如何使用unity制作萌萌的live2d桌宠
- 冈萨雷斯《数字图像处理》学习笔记（4）--图像复原与重建(含傅里叶切片定理推导)
- 【算法leetcode每日一练】804. 唯一摩尔斯密码词
- 上海市建平中学2021年高考成绩查询,2021年上海市高中排名一览表
- 价格奥秘-在超市遇见亚当斯密--第二章 谁在决定一支铅笔的价格?
- 【Nowcoder】2021牛客暑假集训营（第七场): xay loves trees 双指针 + 线段树 + 尺取
- 清空hive表 姿势大全
- 竹林蹊径:深入浅出Windows驱动开发(china-pub预订中）
- ios使用SARUnArchiveANY 解压rar文件（oc和swift版本）