手机端表单样式2

qt 前端开发环境搭建
前端开发前端环境
web前端开发系统环境
针对手机端表单的样式,表单中的图标使用图标字体显示的,在网址https://icomoon.io/app/#/select中可以进行创建、修改、查询图标字体。

HTML

<!– 表单样式2 –>
<form action=”” class=”m-form m-form2″>
<ul class=”m-input-group3″>
<li>
<label>用户名:</label>
<div class=”inputwrap”>
<input type=”text” placeholder=”4-15个字符,首字符为字母” class=”inputbox”>
<a class=”clearinput” href=”javascript:;”>&amp;#xe404;</a>
</div>
</li>
<li>
<label>密码:</label>
<div class=”inputwrap”>
<input type=”password” placeholder=”密码” class=”inputbox”>
<a class=”eyesbox” data-show=”1″ href=”javascript:;”>&amp;#xe306;</a>
<a class=”clearinput” href=”javascript:;”>&amp;#xe404;</a>
</div>
</li>
<li>
<label>验证码:</label>
<div class=”inputwrap-small”>
<input type=”text” placeholder=”请输入验证码” class=”inputbox”>
<a href=”javascript:;” class=”verify”>获取验证码</a>
</div>
</li>
<li>
<label>城市:</label>
<div class=”inputwrap”>
<div class=”selectwrap selectwrap-small fl”>
<span>请选择请选择请选择</span>
<select class=”selectbox”>
<option value=”” selected=”selected”>请选择</option>
<option value=”1″>车贷</option>
<option value=”2″>房贷</option>
<option value=”3″>信用贷</option>
</select>
</div>
<div class=”inputwrap selectwrap selectwrap-small fr”>
<span>请选择</span>
<select class=”selectbox”>
<option value=”” selected=”selected”>请选择</option>
<option value=”1″>车贷</option>
<option value=”2″>房贷</option>
<option value=”3″>信用贷</option>
</select>
</div>
</div>
</li>
<li>
<label>城市:</label>
<div class=”inputwrap selectwrap”>
<span>请选择</span>
<select class=”selectbox”>
<option value=”” selected=”selected”>请选择</option>
<option value=”1″>车贷</option>
<option value=”2″>房贷</option>
<option value=”3″>信用贷</option>
</select>
</div>
</li>
<li>
<input type=”radio” id=”man” class=”radiobox” name=”sex” checked=”checked”><label for=”man”>男</label>
<input type=”radio” id=”woman” class=”radiobox” name=”sex”><label for=”woman”>女</label>
</li>
<li>
<input type=”checkbox” class=”checkbox”>
<span>我同意该协议</span>
</li>
<li>
<input type=”submit” class=”btnbox” value=”提交”>
</li>
</ul>
</form>

CSS

.m-form input {color: #666;}
.m-form label:first-child {float: left;width: 7rem;height: 4rem;text-align: right;padding-right: 0.5rem;line-height: 4rem;}
.m-form .inputwrap {position: relative;overflow: hidden;}
.m-form .inputwrap-small {position: relative;overflow: hidden;padding-right: 11rem;}
.m-form .inputbox {width: 100%;height: 4rem;font-size: 1.4rem;}
.m-form .inputbox-small {width: 55%;}
.m-form .verify {position: absolute;top: 0;right: 0;width: 10rem;height: 3.2rem;line-height: 3.2rem;margin: 0.4rem 0;text-align: center;color: #fff;background-color: #ff8c19;border-radius: 4px;}
.m-form .selectwrap {position: relative;color: #666;height: 4rem;line-height: 4rem;padding: 0 1rem;background-color: #fff;}
.m-form .selectwrap span {position: relative;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.m-form .selectwrap span:after {content: “f0d7”;font-family: “icomoon”;position: absolute;right: 0;font-size: 2rem;}
.m-form .selectwrap-small {width: 48%;}
.m-form .selectbox {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
.m-form .checkbox,.m-form .radiobox {position: relative;width: 1.6rem;height: 1.6rem;margin-right: 0.5rem;font-family: “icomoon”;font-size: 1.6rem;display: inline-block;-webkit-appearance: none;}
.m-form .radiobox:after {content: “e836”;color: #12adff;}
.m-form .radiobox:checked:after {content: “e837”;}
.m-form .radiobox + label {margin-right: 1rem;}
.m-form .checkbox:after {content: “e835”;color: #12adff;}
.m-form .checkbox:checked:after {content: “e834”;}
.m-form .checkbox + span {vertical-align: middle;}
.m-form .btnbox {width: 100%;height: 4rem;font-size: 1.4rem;color: #fff;background-color: #12adff;border-radius: 4px;}
.m-form .btnbox:active {background-color: #1195da;}
.m-form .clearinput,.m-form .eyesbox {display: block;position: absolute;color: #999;right: 0;top: 1rem;font-family: “icomoon”;font-size: 2rem;}
.m-form .eyesbox + .clearinput {right: 2.5rem;}
.m-form .clearinput {display: none;}
.m-form2 .inputbox {padding: 0 1rem;border: 1px solid #ddd;border-radius: 4px;}
.m-form2 .verify {height: 4rem;line-height: 4rem;margin: 0;}
.m-form2 .clearinput,.m-form2 .eyesbox {right: 1rem;}
.m-form2 .eyesbox + .clearinput {right: 3.5rem;}
.m-form2 .selectwrap {line-height: 3.8rem;border: 1px solid #ddd;border-radius: 4px;}

JS

$(function(){
selectbox(“.selectbox”);
formbox(“.clearinput”,”.eyesbox”);
})

//针对下拉菜单
function selectbox(selectbox) {
$(selectbox).change(function() {
var selectText = $(this).find(“option:selected”).text();
$(this).prev(“span”).text(selectText);
})
}

// 表单页面的显示隐藏密码效果
// clearInput:点击清除内容的元素
// eyesbox:点击显隐密码的元素
function formbox(clearInput, eyesbox) {
$(clearInput).siblings(“input”).on(“keyup”, function() {
$(this).siblings(clearInput).show();
})
$(clearInput).click(function() {
$(this).siblings(“input”).val(“”);
$(this).hide();
})
//查看密码
$(eyesbox).click(function() {
if ($(this).attr(“data-show”) == 1) { //明文
$(this).attr(“data-show”, “2”);
$(this).siblings(“input”).attr(“type”, “text”);
$(this).css({
“color”: “#12adff”
});
return;
}
if ($(this).attr(“data-show”) == 2) { //密文
$(this).attr(“data-show”, “1”);
$(this).siblings(“input”).attr(“type”, “password”);
$(this).css({
“color”: “#ccc”
});
return;
}
});
}

系统前端开发技术架构设计
前端开发技术现状
web前端开发用到的技术
» 本文来自:前端开发者 » 《手机端表单样式2》
» 本文链接地址:https://www.rokub.com/7478.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
分享到: 更多 (0)

评论 抢沙发