输入框边框阴影

点击输入框时边框颜色及边框阴影

input:focus {
    outline:none;
    border: 1px solid #6b99f7;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

outline--->绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
box--->shadow向框添加一个或多个阴影

推荐使用：placeholder 属性

提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password

用法：

<form>
     用户：
     <input type="text" name="user" placeholder="请输入用户名">
     <br />  //换行
     密码：
     <input type="password" name="password" placeholder="请输入密码">
</form>

以下为以前旧版控制输入框提示字，由js控制显示隐藏，具体功能已标注出来

<style>
    #wrapper { position: relative; display: inline; }
    #description { position: absolute; left: 1px; color: #999999; display: none; }
</style>

<form id="search">
    <div id="wrapper">
        <!--相对位置-->
        <label for="keyword" id="description">请输入关键字</label>
        <!--绝对位置-->
        <input type="text" id="keyword" name="keyword">
    </div>
    <button>搜索</button>
</form>

<script>
    window.onload = function() {
        if (!document.getElementById("keyword").value) {
            document.getElementById("description").style.display = "inline";
        }
    };//onload页面加载好后，未点击时显示
    document.getElementById("keyword").onfocus = function() {
        if (!document.getElementById("keyword").value) {
            document.getElementById("description").style.display = "none";
        }
    }//onfocus获得焦点，点击时消失
    document.getElementById("keyword").onblur = function() {
        if (!document.getElementById("keyword").value) {
            document.getElementById("description").style.display = "inline";
        }
    }//onblur失去焦点时
    document.getElementById("search").onsubmit = function() {
        if (!document.getElementById("keyword").value) {
            alert("请输入关键字");
            return false;
        }
        return true;
    }//onsubmit表单按钮被点击时发生
</script>

属性：

①输入框不可选中编辑

disabled="disabled"

<input value="部落公社科技有限公司" disabled="disabled" class="form-control base-change-input" type="text">

解决placeholder在IE兼容:

http://zyjustin9.iteye.com/blog/2145467

猜你喜欢