前言
在进行网站效果调试时,ipunt框的默认样式过于单一,此篇文章可以帮助你调整网站的ipunt框样式,使之达到个性化需求!
效果预览
关键CSS代码
input{
width: 100%;
height:100%;
font-size: 14px;
color: #bbbbbb; /*设置字体颜色*/
background:#f7f7f7; /*设置背景颜色*/
text-indent: 10px; /*设置字体缩进*/
outline-style: none; /*设置ipunt框轮廓为无*/
border: 0px; /*设置边框为0*/
border-radius: 3px; /*设置边框圆角3像素*/
}
设置ipunt框默认提示文字(HTML代码)
设置ipunt点击发光效果
input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
完整演示代码
.ban_info{position: absolute;top:15px;background: #fff;z-index: 10;width: 330px;height:265px;left: 53%;margin-left: 160px;border-radius: 10px;padding: 20px 10px;}
.ban_info .go-login{ margin-top:-10px;}
.ban_info .go-login h3{font-size: 18px;color:ff6600;text-align: center;}
.ban_info .go-login h2{height: 20px;text-align: center;margin-top:10px;}
.ban_info .go-login h2 span{font-size: 14px;color: #666;background: #fff;z-index: 2;padding: 0 15px;}
.ban_info .go-login .body p{width: 300px;height:35px;line-height: 50px;margin: 10px auto;}
.ban_info .go-login .body p input{width: 100%;height:100%;font-size: 14px;color: #bbbbbb;background:#f7f7f7;text-indent: 10px; outline-style: none ;border: 0px;border-radius: 3px;}
.ban_info .go-login .body p input:focus{border-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)} /*input点击发光*/
.ban_info .go-login .body p span{position: absolute;top: 0;right: 0;height: 50px;width: 100px;}
.ban_info .go-login .body p span img{height: 100%;width:100%;}
.ban_info .go-login .body p.login-box-tips{line-height: 30px;height: 30px;}
.ban_info .go-login .login-box-tips a{font-size: 14px;color: #5185ff;line-height: 30px;}
.ban_info .go-login .login-box-tips a.user-text{float: right;border-bottom: 1px solid #5185ff;}
.ban_info .go-login .banner-login{background:#ff6600;text-align: center;font-size: 16px;color: #fff;line-height: 40px;width: 140px;height: 40px;border: 1px solid #ff6600;border-radius: 8px;float:left;}
.ban_info .go-login .banner-sign{background: #5185ff;text-align: center;font-size: 16px;color: #fff;line-height: 40px;width: 140px;height: 40px;border: 1px solid #999;border-radius: 8px;float: right;}