简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css - 遇到一个样式问题
伊谢尔伦
伊谢尔伦 2017-04-17 13:02:34
0
6
491

就是想做个小验证 如果没有输入内容就在失去焦点时把边框变成红色 我是这么设置的样式1px solid red 代码运行没问题 但是鼠标离开输入框时边框不但变成了红色还有一个细微的变化就是失去焦点的这一行和上一行的间距缩小了那么一点 就是margin-top发生了变化 我把失去焦点的边框变成2px solid red间距就没变化 但是改成2px就太难看了 这个应该怎么办呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        
    </title>
    <style type="text/css">
    p input{display: inline-block;width: 200px;height: 20px;}
    p .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;}
    p #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;}
    </style>
    <script src="ajax"></script>
    <script type="text/javascript">
        window.onload=function(){
            var oInput=document.getElementsByTagName('input');
            var oIpt
            for(i=0;i<oInput.length;i++){
                oInput[i].onblur=function(){
                  if(this.value==''){
                      this.style.border='1px solid red';
                  }
                }
            }
        }
    </script>
</head>
<body>
<p>
    <form>
        <span class="span1">用 户 名:</span><input type="text" id="ipt1"><span id="sp1"></span><br />
        <span class="span1">密　　码:</span><input type="password" id="ipt2"><span id="sp2"></span><br />
        <span class="span1">确认密码:</span><input type="password" id="ipt3"><span id="sp3"></span><br />
        <span class="span1">邮　　箱:</span><input type="text" id="ipt4"><span id="sp4"></span><br />
        <button type="submit">提交</button>
    </form>
</p>
</body>
</html>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

reply all(6)
洪涛
洪涛2017-04-17 13:04:34 6 floor 
p input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc}
Like +0
Add Reply
PHPzhong
PHPzhong2017-04-17 13:04:34 5 floor

Try wrapping each line with p and setting margin, and cancel the input margin

Like +0
Add Reply
Ty80
Ty802017-04-17 13:04:34 4 floor

Just add a border style to the p input

Like +0
Add Reply
阿神
阿神2017-04-17 13:04:34 3 floor

The default border-size of input is 2px. After changing it to 1px in the program, the space occupied is smaller, so you can see that other elements have moved up a little.
The solution is to set the default border of the input to 1px

input {
    border: 1px solid silver;
}
Like +0
Add Reply
PHPzhong
PHPzhong2017-04-17 13:04:34 2 floor

What the questioner mentioned:

The distance between the line that lost focus and the previous line has shrunk a little, which means the margin-top has changed

This is wrong. margin-top will not change. The real situation is this:

The default border of the

input element is 2px, so there will be a jitter after dynamically changing it to 1px. Just set the initial input border to 1px like @zhangpenglin's answer.

Like +0
Add Reply
迷茫
迷茫2017-04-17 13:04:34 1 floor

Set box-sizing: border-box; so that the thickness of the border does not affect the width and height of the entire content; box-sizing: content-box | border-box
Default value: content-box
Applicable to : All elements that accept width and height
Inheritance: None
Animability: No
Calculated value: Specified value

content-box: padding and border are not included in the defined width and height. The actual width of the object is equal to the sum of the set width value, border, and padding, that is (Element width = width + border + padding)
This attribute behaves like a box model in standard mode.
border-box: padding and border are included within the defined width and height. The actual width of the object is equal to the set width value. Even if border and padding are defined, the actual width of the object will not be changed, that is (Element width = width)
This attribute behaves like a box model in weird mode.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！