在HTML中分隔元素以最小化影响另一个元素的一个元素的最佳方法是什么？

时间：2015-09-28 11:52:43

标签： javascript html css

我已经用HTML编写了一个密码表单，它有一些很好的功能但是，我刚刚做了一个改变而css正在影响这些元素。基本上当我点击不同的输入框时，它会通过稍微向上移动来影响我的表单的标签。

这是一个jsfiddle，所以人们可以看到明显的变化。 https://jsfiddle.net/b6hv8wLh/

这里有一些代码：

<div class="container">
  <div class="jumbotron" id="firstform">
    <h1>Sign up page</h1> 
    <form id="myform">

        <label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>

        <div class="pwordCheck">
            <label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
            <label>Confirm Password </label>  <input type="password" class="f1input" id="confpword"  onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
            <span id="themessage" class="themessage"></span><br> 
        </div>

        <label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
        <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
              <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Java Developer</a></li>
                <li><a href="#">SQL Developer</a></li>
                <li><a href="#">Tester</a></li>
              </ul>
        </div>
        <label>Job Role</label> <input type="text" class="f1input"/><br>

        <label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>

        <label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>

      <input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
    </form>  

  </div>

我已经尝试将我的表单包装在各种div中并试图击中单个元素，但它仍在进行更改。为了弄清楚，我试图让它进入用户点击输入的阶段，标签根本不会改变。

非常感谢

5 个答案:

答案 0 :(得分：1)

由于焦点时输入字段的边界。因此，为具有相同背景颜色的输入字段添加border属性。

int32_t

答案 1 :(得分：1)

这是由于您在焦点上为输入分配border:4px solid red;样式造成的。这会导致输入的整体大小变大，从而向下移动元素。

防止这种情况的一种方法是为输入4px边框提供与背景相同的颜色。然后边框将在焦点上变为红色并变为可见，但尺寸实际上不会发生变化：

    input {
      background-color: #fff; 
      margin-left: 10px; 
      margin-bottom: 10px; 
      padding-right: 50px;
      border-radius: 15px;
      border:4px solid #D8D8D8;
    }

额外的border:4px solid #D8D8D8;声明会产生不同。

答案 2 :(得分：0)

立即解决方案

在您的情况下，修复非常简单。输入框的边框大小在焦点时不应更改。

因此，例如焦点上的输入具有这种风格：

border: 4px solid red;

但是当他们失焦时，他们没有边界。所以你应该设置一个4px的边框，当它没有聚焦时，它的背景颜色和背景相同。

类似Bootstrap的解决方案

或者，您应该考虑使用单个像素边框，而使用框阴影。就像Bootstrap那样，就像我看到的那样。恕我直言，看起来很棒，特别是与这些巨大的边界形成鲜明对比。

答案 3 :(得分：0)

使用box-shadow不需要任何额外的CSS。

/* CHANGE BORDER TO BOX SHADOW ON THE FOCUS */
.f1input:focus{
	outline: none !important;
    box-shadow: 0 0 0 4px red;
	border-radius: 15px;
}


body {
	background-color: #080808;
}
/*
.navbar-brand {
	background-color: red;
}
*/
.container-fluid{
	background-color: #006600;
	border: 0;
}

#websiteName a{
	color: black;
	font-size: 20px;
}

#websiteName a:hover{
	color: red;
}

#theLinks ul li a{
	color: black;
	font-size: 20px;
}

#theLinks ul li a:hover{
	color: red;
}


#firstform{
	background-color: #D8D8D8;
}

#firstform span{
	position: absolute;
}

.glyphicon-search
{
   position:relative !important;
}

#firstform .themessage{
    position: absolute;
}


#firstform {
	width: 60%;
	margin: auto;
	text-align: center;
}

#firstform h1{
	text-align: center;
} 

#firstform label{
	text-align: left;
} 

#myform {
	width: 100%;
}



input {
background-color: #fff; 
margin-left: 10px; 
margin-bottom: 10px; 
padding-right: 50px;
border-radius: 15px;
border: none;
}
<div class="container">
  <div class="jumbotron" id="firstform">
    <h1>Sign up page</h1> 
    <form id="myform">
		
		<label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>
		
		<div class="pwordCheck">
			<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
			<label>Confirm Password </label>  <input type="password" class="f1input" id="confpword"  onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
			<span id="themessage" class="themessage"></span><br> 
		</div>
		
		<label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
		<div class="dropdown">
			  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
			  <span class="caret"></span></button>
			  <ul class="dropdown-menu">
				<li><a href="#">Java Developer</a></li>
				<li><a href="#">SQL Developer</a></li>
				<li><a href="#">Tester</a></li>
			  </ul>
		</div>
		<label>Job Role</label> <input type="text" class="f1input"/><br>
		
		<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>
		
		<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>
		
	  <input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
	</form>  
    
  </div>

答案 4 :(得分：0)

Try this:

    #myform{
      width: 450px;
      margin: 0 auto;
    }
    .sep{
      padding: 10px;
    }
    body {
      background-color: #080808;
    }
    /*
    .navbar-brand {
      background-color: red;
    }
    */
    .container-fluid{
      background-color: #006600;
      border: 0;
    }
    #websiteName a{
      color: black;
      font-size: 20px;
    }
    #websiteName a:hover{
      color: red;
    }
    #theLinks ul li a{
      color: black;
      font-size: 20px;
    }
    #theLinks ul li a:hover{
      color: red;
    }
    #firstform{
      background-color: #D8D8D8;
    }

    #firstform span{
      position: absolute;
    }
    .glyphicon-search
    {
       position:relative !important;
    }
    #firstform .themessage{
        position: absolute;
    }
    #firstform h1{
      text-align: center;
    } 
    .sep label{
      padding: 10px;
    }
    input {
    background-color: #fff; 
    margin-left: 10px; 
    padding-right: 50px;
    border-radius: 15px;
    border: none;
    }
    .f1input:focus{
      outline: none !important;
        border:4px solid red;
      border-radius: 15px;
    }
    input#occupation{
      background-color: #999;
    }
    .mytooltip + .tooltip > .tooltip-inner {
      background-color: #f00;
    }
    label{
        display:inline-block;
        width:150px;
    }
    /*
    @-webkit-keyframes example{
      25% {color: black;}
      50%   {color: yellow;}
        75%   {color: green;}
        100%   {color: red;}
    }

    #firstform h1{
        color: red;
        -webkit-animation-name: example; 
        -webkit-animation-duration: 4s;
        -webkit-animation-iteration-count: 1;
    }*/
    .dropdown:hover .dropdown-menu {
        display: block;
    }#myCarousel {
      width:50%;
      margin: auto;
      background-color: red;
      text-align: center;
    }
    #myCarousel item {
      text-align: center;
    }

        enter code here

    <div class="container">
      <div class="jumbotron" id="firstform">
        <h1>Sign up page</h1> 
        <form id="myform">
            <div class="sep">
            <label>Username </label> 
            <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip">
            </div>
            <div class="pwordCheck sep">
                <label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
                <label>Confirm Password </label>  <input type="password" class="f1input" id="confpword"  onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
                <span id="themessage" class="themessage"></span><br> 
            </div>
            <div class="sep">
            <label>Email </label> <input type="email" class="f1input" id="e-mail"/>
            </div>
            <div class="dropdown sep">
                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
                  <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Java Developer</a></li>
                    <li><a href="#">SQL Developer</a></li>
                    <li><a href="#">Tester</a></li>
                  </ul>
            </div>
            <div class="sep">
            <label>Job Role</label> <input type="text" class="f1input"/>
            </div>
            <div class="sep">
            <label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/>
            </div>
            <div class="sep">
            <label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/>
            </div>
          <input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
        </form>  `enter code here`
      </div>
相关问题
最新问题