Как сохранить элемент HTML выровненным при щелчке / фокусе? - PullRequest
Новая
       45

Как сохранить элемент HTML выровненным при щелчке / фокусе?

1 голос
/ 17 декабря 2010

ОБНОВЛЕНИЕ: Исправлено с margin-bottom: 0px; Но как-то это все равно влияет на размер текстового поля.Изображение большего размера.Тогда, если я использую outline вместо border, border-radius не будет работать.

У меня проблема с этими элементами, когда один из них щелкается / фокусируется, это влияет на позицию другого элемента,Это потому, что граница больше нормального размера.Итак, как это исправить?

Например: нажмите на текстовую область, это заставит ввод текста отойти.Примечание: я не хочу использовать box-shadow.Фактически не нужно использовать свойство position.

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;
}
input:focus, textarea:focus {
  border: 3px solid #507ad5;
  margin-bottom: 0px;
}
textarea {
  width: 300px;
  height: 100px;
}

ОБНОВЛЕНИЕ: Смотрите и тестируйте его напрямую: http://jsfiddle.net/hedaru/dSgxr/6/Вот как это должно быть: goo.gl/jAojK

Ответы [ 5 ]

4 голосов
/ 17 декабря 2010

Ваш CSS указывает, что сфокусированные элементы должны быть больше, чем несфокусированные версии тех же элементов.

Добавление border физически увеличивает элемент.Либо добавьте такое же количество пикселей границы к базе вашего элемента (с белым цветом), либо используйте outline.

Вот мое исправление: http://jsfiddle.net/g105b/dSgxr/2/

3 голосов
/ 17 декабря 2010

Это происходит из-за этого: 

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

Если вы добавите еще один пиксель к границе, элемент будет двигаться.

Вы должны сохранить границу в 1px и изменить ее цвет. 

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

Обновление :

Используйте поля вместо позиции, это зафиксирует его в том же месте, и границы будут "расти" вокруг него. Вот пример .

CSS: 

input:focus, textarea:focus {
  border: 2px solid #507ad5;
  margin-top: 0px;
  margin-left: -1px;
}
0 голосов
/ 17 декабря 2010

Или просто добавьте «margin: 0px» к сфокусированному.Просто убедитесь, что поле margin + border делает одинаковое число для сфокусированного и не сфокусированного.

0 голосов
/ 17 декабря 2010

Возможно, вы можете изменить разницу в марже. Похоже, что нижний край элементов сейчас составляет 2 пикселя, поэтому, когда вы изменяете фокус на 0 пикселей, вы компенсируете рост элемента. Вот так: 

input:focus, textarea:focus {
  border: 2px solid #507ad5;
  margin-bottom: 0px;
}
0 голосов
/ 17 декабря 2010

Другой вариант (помимо простого изменения цвета границы) - добавить поле, которое уменьшается на ту же величину, что и граница.Обратите внимание, что поле должно быть достаточно большим, чтобы преодолеть коллапс поля с соседними элементами.

...