HTML修改IP,htmlcss修改ipunt框样式

前言

在进行网站效果调试时，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;}

用户登录

低价发稿，只有通科

忘记密码

《关于通科服务》

登录

注册