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代码）

<input type="text" placeholder="请输入默认内容">

设置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)
}

完整演示代码

<style type="text/css">
.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;}



</style>

<div class="ban_info">
        <div class="go-login">
            <h3>用户登录</h3>
            <h2>
                <span>低价发稿，只有通科</span>
            </h2>
            <div class="body">
                <form id="registform">
                   
                    <p>
                        <input id="username" type="text" class="text text1" placeholder="请输入手机号码">
                    </p>
                    <p>
                        <input id="password" type="password" class="text text2" placeholder="请输入密码">
                    </p>
                    
                    <p class="login-box-tips">
                        <a class="forget-password" href="https://www.sxyye.com" target="_blank">忘记密码</a>
                        <a href="/tongke/index.html" target="_blank" class="user-text" id="user-text">《关于通科服务》</a>
                    </p>
                    <p>
                        <a class="banner-login" href="https://www.sxyye.com" target="_blank">登录</a>
                        <a class="banner-sign" href="https://www.sxyye.com" target="_blank">注册</a>
                    </p>
                  
                </form>
               
            </div>
        </div>
    </div>