Автоматически изменять размер поля ввода с закругленными углами?

Question

Я создал текстовое поле, которое выглядит как на картинке ниже, однако я хочу, чтобы оно изменяло размеры в соответствии с типами пользователей, как здесь: http://jsbin.com/ahaxe

Я думаю, что не будет проблемой вставить поисковое изображение в качестве фона и выровнять его вправо, однако я не знаю, как сделать скругленные углы без использования изображения.

Спасибо всем:)

Answer 1

input {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
}

Answer 2

возможно, но не работает в IE Вы можете использовать стили CSS для этого. например: -moz-border-radius: 5px; -webkit-border-radius: 5px; радиус границы: 5 пикселей;

Answer 3

Сначала попробуйте предложение faraz, и, если оно не работает в IE, попробуйте добавить другое объявление, используя префикс -ms-, например так:

-ms-border-radius: 12px;

Если оно ОСТАЕТСЯ не работает,Вы можете попробовать использовать CSS PIE для принудительной установки css3 в IE: http://css3pie.com/

Что касается решения по изменению размера, вы, вероятно, найдете лучшее решение, чем мое, но вы можете попробовать это:

<input onkeyup="if(this.value.length > 10) { this.style.width = this.offsetWidth + 20 + 'px' }" type="text" />

В этом коде каждый раз, когда пользователь вводит что-то в поле, Javascript проверяет, не превышает ли количество символов во входных данных значение 10. Если «Да», то оно будет расти на 20px.Измените значения на ваше сердечное содержание, пожалуйста.И удачи в вашем проекте.