三种类型的企业网站,虚拟主机怎么使用,泉州网站建设策划,东莞今天发生的重大新闻前面的话 由于一些系统原生的表单控件在各个浏览器中显示效果不一致#xff0c;且无法设置某些关键CSS样式#xff0c;为了保证表单在各浏览器中的兼容性#xff0c;表单美化就是不得不做的一件事了 单选按钮
【实现效果】 stylewidth: 100%; height: 120px; s…前面的话 由于一些系统原生的表单控件在各个浏览器中显示效果不一致且无法设置某些关键CSS样式为了保证表单在各浏览器中的兼容性表单美化就是不得不做的一件事了 单选按钮
【实现效果】 stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/html/beauty/b1.html frameborder0 width320 height240
【实现过程】 body{
margin: 0;
font: 16px/20px 宋体;
}
.box{
width: 500px;
height: 100px;
line-height: 100px;
margin: 0 auto;
border: 1px solid black;
text-align: center;
}
.box label{
position:relative;
padding-left: 20px;
}
.box input{
visibility: hidden;
}
.box i{
position: absolute;
top: -2px;
left: -2px;
height: 19px;
width: 19px;
background: url(http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/radiobutton.gif) no-repeat -14px -18px;
}
.box label:hover{
color: red;
}
.box label:hover i{
background-position: -14px -118px;
}
.box label.selected i{
background-position: -14px -218px;
} div classbox idbox
选择一项游戏方式
label forxiui/i咻一咻/label
input idxiu typeradio value咻一咻
label foryaoi/i摇一摇/label
input idyao typeradio value摇一摇
label forniui/i扭一扭/label
input idniu typeradio value扭一扭
/div
script
var oBox document.getElementById(box);
var aLabel oBox.getElementsByTagName(label);
for(var i 0, leni aLabel.length; i leni; i ){
aLabel[i].onclick function(){
for(var j 0,lenj aLabel.length; j lenj; j ){
aLabel[j].removeAttribute(class);
}
this.className selected;
}
}
/script 多选按钮
【实现效果】 stylewidth: 100%; height: 120px; srchttps://demo.xiaohuochai.site/html/beauty/b2.html frameborder0 width320 height240
【实现过程】 body{
margin: 0;
font: 16px/20px 宋体;
}
.box{
width: 600px;
height: 100px;
line-height: 100px;
margin: 0 auto;
border: 1px solid black;
text-align: center;
}
.box label{
position:relative;
padding-left: 20px;
}
.box input{
visibility: hidden;
}
.box i{
position: absolute;
top: -2px;
left: -2px;
height: 19px;
width: 19px;
background: url(http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/checkbox.gif) no-repeat -14px -18px;
}
.box label:hover{
color: red;
}
.box label:hover i{
background-position: -14px -118px;
}
.box label.selected i{
background-position: -14px -218px;
} div classbox idbox
选择日常手机交易方式(可多选)
label forai/i支付宝/label
input ida typeradio value支付宝
label forti/i微信/label
input idt typeradio value微信
label forbi/i百度钱包/label
input idb typeradio value百度钱包
/div
script
var oBox document.getElementById(box);
var aLabel oBox.getElementsByTagName(label);
for(var i 0, leni aLabel.length; i leni; i ){
aLabel[i].onclick function(){
if(!this.className){
this.className selected;
}else{
this.removeAttribute(class);
}
}
}
/script 下拉列表
【实现效果】 stylewidth: 100%; height: 230px; srchttps://demo.xiaohuochai.site/html/beauty/b3.html frameborder0 width320 height240
【实现过程】 body{
margin: 0;
font: 16px/20px 宋体;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 300px;
height: 40px;
margin: 0 auto;
border: 1px solid black;
}
.box .show{
background-color: red;
line-height: 30px;
padding: 5px;
}
.box .show-area{
color: white;
vertical-align: middle;
}
.box .show-select{
position: relative;
display: inline-block;
vertical-align: middle;
width: 200px;
height: 28px;
border: 1px solid #999;
background-color: white;
text-indent: 20px;
cursor: pointer;
}
.box .show-selectAdd{
color: #999;
}
.box .show-select i{
position: absolute;
height: 0;
width: 0;
top: 0;
right: 0;
margin-top: 12px;
margin-right: 5px;
border: 5px solid transparent;
border-top-color: black;
}
.box .show-selectAdd i{
border: 5px solid transparent;
border-bottom-color: black;
margin-top: 8px;
}
.box .list{
border: 1px solid #dfdfdf;
border-top: none;
display: none;
}
.box .list-in{
height: 30px;
line-height: 30px;
text-indent: 74px;
border-bottom: 1px solid #dfdfdf;
cursor: pointer;
}
.box .list-in:hover{
color: red;
} div classbox idbox
div classshow
strong classshow-area地址:/strong
span classshow-select朝阳区i/i/span
/div
ul classlist
li classlist-in朝阳区/li
li classlist-in海淀区/li
li classlist-in东城区/li
li classlist-in西城区/li
li classlist-in丰台区/li
li classlist-in石景山区/li
/ul
/div
script
var oBox document.getElementById(box);
var oDiv oBox.getElementsByTagName(div)[0];
var oShow oDiv.getElementsByTagName(span)[0];
var oUl oBox.getElementsByTagName(ul)[0];
var aLi oUl.getElementsByTagName(li);
//简单思路
//[1]点击oDiv时默认文字为黑色三角向上变成文字为#999三角向下简化为增加一个show-selectAdd类名oUl从隐藏变成显示
oDiv.onclick function(e){
//阻止冒泡
e e || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble true;
}
oShow.className show-select show-selectAdd;
oUl.style.display block;
}
//[2]点击oUl的li时oUl从隐藏变成显示文字和三角恢复到黑色和向上的默认样式并且文字内容变成当前点击的li的内容
for(var i 0,lenaLi.length; i len;i ){
aLi[i].onclick function(){
oShow.innerHTML this.innerHTML i/i;
}
}
//[3]点击box以外的其他部分时oUl从隐藏变成显示文字和三角恢复到黑色和向上的默认样式
document.onclick function(){
this.getElementsByTagName(span)[0].className show-select;
oUl.style.display none;
}
/script 更多专业前端知识请上
【猿2048】www.mk2048.com
