网站建设技巧

网站建设技巧

2006年起一直从事互联网行业,竭尽所能、尽心尽力为各行各业的客户提供服务

网站建设技巧 932次

CSS+JQ表单美化

众所周知,html中表单的输入框和文本框的样式是可以通过css样式很容易设置出来自己想要的效果,但是单选,复选和下拉选择这三个元素,通过css来直接设置却是不太理想,尤其是下拉框select元素的样式设置。


其实网上还是有一些不错的解决方案,就集合在下面。


单选radio元素和多选checkbox元素的css样式设置,主要是通过伪类模拟。


下拉框select元素用css直接设置,基本上是没有太理想的解决方案,我这里是通过用单选radio元素的组合来模拟成下拉框select元素的效果。嗯,所有的表单元素都是用css写的,没有用到js,至于兼容性则还没有验证。


直接上代码吧,大家复制粘贴,在浏览器中预览就可以了。


或者直接下载现成的 css+jq表单美化 ,现在之后修改下文件后缀 .txt 为 .html ,就可以直接浏览了。


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus">

<meta name="Author" content="wcdstudio">

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<title>css+jq表单样式美化</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<style type="text/css">

*{margin:0;padding:0;}

body{line-height: 20px;}

table tr td{padding: 10px;}

</style>

<form action="" method="get">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>姓名</td>

<td><div><input type="text" name="textfield" /></div></td>

</tr>

<tr>

<td>电话</td>

<td>

<div><input type="text" name="textfield2" /></div>

<style>

/*--输入框样式--*/

.text input{height: 30px;border: 1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);padding:0 5px;}

</style>

</td>

</tr>

<tr>

<td>备注</td>

<td>

<div><textarea name="textarea"></textarea></div>

<style>

/*--文本框样式--*/

.textarea textarea{display:block;height: 60px;border: 1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);padding:5px;}


</style>

</td>

</tr>

<tr>

<td>性别</td>

<td>

<div><label><input type="radio" name="radiobutton" value="radiobutton" /><span>男</span></label></div>

<div><label><input type="radio" name="radiobutton" value="radiobutton" /><span>女</span></label></div>

<div><label><input type="radio" name="radiobutton" value="radiobutton" /><span>不能说的秘密</span></label></div>

<style>

/*--单选样式--*/

.radio{margin-right:20px;font-size:13px;}

.radio label{display:block;position:relative;white-space:nowrap;}

.radio input{width:20px;height:20px;opacity:0.5;float:left;}

.radio span{display:inline-block;padding-left:5px;}

.radio span:after{content:'';display: block;position: absolute;top:0;left:0;width: 18px;height: 18px;background: #f9f9f9;border-radius: 20px;border:1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);opacity:0.5;}

.radio input:checked+span:after{width:18px;height:18px;background:#333;background-image:linear-gradient(45deg,transparent 10%,#ccc 10%,#ccc 16%,transparent 16%, transparent 100%),linear-gradient(-45deg,transparent 20%,#ccc 20%,#ccc 26%,transparent 26%, transparent 20px);background-size:18px 18px;background-position: 3px -4px, -3px -4px;border:1px solid #333;}

</style>

</td>

</tr>

<tr>

<td>爱好</td>

<td>

<div><label><input type="checkbox" name="checkbox" value="checkbox" /><span>篮球</span></label></div>

<div><label><input type="checkbox" name="checkbox2" value="checkbox" /><span>音乐</span></label></div>

<div><label><input type="checkbox" name="checkbox3" value="checkbox" /><span>电视</span></label></div>

<style>

/*--多选选样式--*/

.checkbox{margin-right:20px;}

.checkbox label{display:block;position: relative;font-size:13px;}

.checkbox input{width: 20px;height: 20px;float:left;opacity:0.5;}

.checkbox span{display:inline-block;padding-left:5px;}

.checkbox span:after{content:'';display: block;position: absolute;top:0;left:0;width: 18px;height: 18px;background:#f9f9f9;border:1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);opacity:0.5;}

.checkbox input:checked+span:after{width:18px;height:18px;background:#333;background-image:linear-gradient(45deg,transparent 10%,#ccc 10%,#ccc 16%,transparent 16%, transparent 100%),linear-gradient(-45deg,transparent 20%,#ccc 20%,#ccc 26%,transparent 26%, transparent 20px);background-size:18px 18px;background-position: 3px -4px, -3px -4px;border:1px solid #333;}

</style>

</td>

</tr>

<tr>

<td>地区</td>

<td>

<dl>

<dt>请选择</dt>

<dd>

<div><label><input type="radio" name="radiobutton1" value="radiobutton" /><span>在样式中调整opacity为0(透明)</span></label></div>

<div><label><input type="radio" name="radiobutton1" value="radiobutton" /><span>即可隐藏默认radio样式</span></label></div>

<div><label><input type="radio" name="radiobutton1" value="radiobutton" /><span>上海</span></label></div>

</dd>

</dl>

<style>

/*--下拉样式--*/

.selectsbox{position:relative;display:block;width:300px;font-size:13px;}

.selectsbox dt{font-size:13px;font-weight:normal;padding:5px;background:#f9f9f9;border:1px solid #eee;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);position:relative;}

.selectsbox dt:after{content:'';display:block;position:absolute;top:50%;transform:translateY(-50%);right:10px;border-top:5px solid #ddd;border-left:5px solid transparent;border-right:5px solid transparent;}

.selectsbox dd{display:none;position:absolute;z-index:1;top:32px;left:0;width:300px;background:#f9f9f9;}

.selectsbox dd div:hover{background:#ddd;}

.select{padding:5px;border:1px solid #eee;border-top:none;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);position:relative;}

.select label{position:relative;display:block;}

.select input{position:absolute;top:50%;left:80%;transform:translate(-50%,-50%);opacity:0.5;}

.select span:after{content:'';display: block;position: absolute;top:0;right:0;width: 18px;height: 18px;background:#f9f9f9;border:1px solid #ddd;}

.select input:checked+span:after{width:18px;height:18px;background:#333;background-image:linear-gradient(45deg,transparent 10%,#ccc 10%,#ccc 16%,transparent 16%, transparent 100%),linear-gradient(-45deg,transparent 20%,#ccc 20%,#ccc 26%,transparent 26%, transparent 20px);background-size:18px 18px;background-position: 3px -4px, -3px -4px;border:1px solid #333;}

.selectsbox:hover dd{display:block;}

</style>

<script>

$(function(){

$(".select").click(function(){

$(".selectsbox dt").html($(this).find("span").html());

})

})

</script>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>

<div><input type="submit" name="Submit" value="提交" /></div>

<style>

/*--按钮样式--*/

.submit input{width:80px;height: 30px;border: 1px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);}

</style>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>

<div tabindex="1">

<input type="radio" name="radiobutton2" value="radiobutton" id="opt1" checked /><label for="opt1">在样式中调整opacity为0(透明)</label>

<input type="radio" name="radiobutton2" value="radiobutton" id="opt2" /><label for="opt2">即可隐藏默认radio样式</label>

<input type="radio" name="radiobutton2" value="radiobutton" id="opt3" /><label for="opt3">上海</label>

</div>

<style>

.selectx{display:flex;width:300px;flex-wrap:wrap;position:relative;height:40px;}

.selectx label{width:300px;line-height:40px;display:block;display:flex;position:absolute;top:0;pointer-events:none;order:2;z-index:1;}

.selectx label:hover{background:#ddd;}

.selectx:focus label {position:relative;pointer-events:all;}

.selectx input:checked+label{order:1;z-index:2;background:#ddd;}

</style>

</td>

</tr>

</table>

</form>

</body>

</html>


css下拉框样式美化
如何自己做网站?

相关文章

联系我们

24小时服务热线

150 0622 7297

  • 微信二维码
    昆山网站建设
  • 微信二维码
    昆山网站建设

江苏苏州昆山市周市镇翠微西路

免费获取您的互联网建设与营销方案

欢迎访问WCDSTUDIO 24小时咨询电话15306227297