Изменение ввода текста цвет рамки, не изменяя его высота

Скажем, у меня есть ввод текста по умолчанию без каких-либо CSSИзменение ввода текста цвет рамки, не изменяя его высота

<input type="text" />

Я хочу, чтобы изменить его цвет рамки на красный, так что я добавить стиль

<input type="text" style="border-color:red" />

После этого граница красная, но размер 2px. Если я изменил границу на 1px, высота ввода будет меньше, чем значение по умолчанию.

Как изменить границу на 1px и убедиться, что истинная высота ввода (включая границу) такая же, как и по умолчанию?

источник

2013-03-14 user937450

Добавить пиксель прокладки? – cHao

@cHao Да, это сработает. Но проблема в том, что im не уверен, что входная граница ширины 2px одинакова во всех браузерах. – user937450

Итак, решите, что вы * хотите * быть одинаковым во всех браузерах и установите его. :) Есть причина, почему во многих случаях первые правила, которые люди пишут (или включают в себя), - это те, которые «перезаписывают» стили в известное согласованное состояние. – cHao

Попробуйте

<input type="text"/>

Он будет отображать же во всех кросс-браузер, как Mozilla, Chrome и Internet Explorer.

<style> 
    input{ 
     border:2px solid #FF0000; 
    } 
</style>

Dont добавить стиль инлайн, потому что его не хорошая практика, использование класса, чтобы добавить стиль для ввода.

источник

2013-03-14 08:35:52

Любовь, как вы говорите «попробуйте это ... ** Не делайте этого **». Можно предположить, что если вы считаете, что это плохая практика, вы ее не демонстрируете. В частности, в ответах люди будут голосовать. :) – cHao

согласен с chao –

Встраиваемые стили - будущее http://formidablelabs.com/blog/2015/03/01/launching-radium/ – ooolala

использовать это, не будет влиять на рост:

<input type="text" style="border:1px solid #ff0000" />

источник

2013-03-14 08:54:26

Установите прозрачную границу, а затем изменить его:

.default{ 
border: 2px solid transparent; 
} 

.new{ 
border: 2px solid red; 
}

источник

2013-03-14 08:55:17

Это CSS решение работает для меня:

input:active, 
input:focus { 
    border: 1px solid #red 
} 

input:active, 
input:focus { 
    padding: 2px solid #red /*for firefox and chrome*/ 
} 

/* .ie is a class you would need to set at the html root level */ 
.ie input:active, 
.ie input:focus { 
    padding: 3px solid #red /* IE needs 1px extra padding*/ 
}

Я понимаю, что это не обязательно для FF и Chrome, но IE это нуждается. И есть обстоятельства, когда вам это нужно.

источник

2017-01-02 13:41:41 Tarun

Это то, что вы ищете.

$("input.address_field").on('click', function(){ 
    $(this).css('border', '2px solid red'); 
});

источник

2017-11-24 09:25:08

Изменение ввода текста цвет рамки, не изменяя его высота

ответ

Смежные вопросы