How to keep the HTML element aligned when clicked/focused?

UPDATE: Fixed with margin-bottom: 0px; But somehow it still affect the text box size. Larger.

Then if I use outline instead of border, the border-radius will not work.

I have a problem with the these elements when one of them is clicked/focused, it's affect the other element's position. It's because the border is larger than the normal size. So how to fix it?

For example: Click on the text area, it'll make the text input move away. Note: I don't want to use box-shadow. No need to use position property actually.

HTML

<h3>Text Area</h3>
<textarea></textarea>
<br />
<h3>Input: Text</h3>
<input type="text" />

CSS

input{
  background: #fff;
  border: 1px solid #B7B7B7;
  font-size: 15px;
  margin: 2px 0;
  padding: 5px 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}开发者_如何学Go
input:focus, textarea:focus {
  border: 3px solid #507ad5;
  margin-bottom: 0px;
}
textarea {
  width: 300px;
  height: 100px;
}

UPDATE: See and test it directly: http://jsfiddle.net/hedaru/dSgxr/6/

Here it is how it supposed to be: goo.gl/jAojK

Your CSS specifies the focused elements to be larger than the non-focused versions of the same elements.

Adding a border physically grows an element. Either add the same number of pixels of border to your element's base (with white colour) or use outline.

Here's my fix: http://jsfiddle.net/g105b/dSgxr/2/

It happens because of this:

input:focus, textarea:focus {
  border: 2px solid #507ad5;
}

If you add another pixel to the border, the element is going to move.

You should keep the border at 1px and change its color.

input:focus, textarea:focus {
  border: 1px solid #507ad5;
}

Update:

Use margins instead of position, it will fix it in the same place and the borders will "grow" around it. Here's an example.

CSS:

input:focus, textarea:focus {
  border: 2px solid #507ad5;
  margin-top: 0px;
  margin-left: -1px;
}

Another option (besides merely changing the border colour) is to add a margin that shrinks by the same amount that the border grows. Note that the margin must be large enough to overcome the margin collapse with adjacent elements.

Perhaps you can change the difference in margin. It seems like the margin-bottom of the elements right now is 2px, so when you change it to 0px on focus, you compensate for the growth of the element. Like so:

input:focus, textarea:focus {
  border: 2px solid #507ad5;
  margin-bottom: 0px;
}

Or just add "margin: 0px" on the focused one. Just make sure margin+border makes the same number on focused and unfocused.