CSS - Удаление активного поля ввода

Использование только html и css, как отключить синюю (в Firefox) подсветку цвета вокруг активного поля ввода. Я пробовал использовать input {outline:none;}, но без успеха. Спасибо за помощь! =)CSS - Удаление активного поля ввода

ОК, игнорируя предыдущий код о контуре, я выбрал неправильное свойство для изменения. То, что я пытаюсь получить, - просто удалить подсветку (независимо от того, какой браузер, его полужирная и цветная рамка, которая появляется) вокруг поля ввода активной формы, без изменения или отключения стиля. Thanks =)

источник

2013-03-16 Kizer Yakuza

Работы для меня ... –

Вы понимаете, что это функция доступности, не так ли? – cimmanon

может кто-нибудь помочь? =) –

См. Это fiddle.

Кажется, что вам нужно установить свойство границы, чтобы сделать работу outline: none. Если вы прокомментируете в директиве border, контур исчезнет.

источник

2013-03-16 19:17:08 ohcibi

Для удаления выделения попробуйте добавить это правило в поле ввода (ы):

-moz-appearance:none;

Это также может быть сделано для WebKit на основе браузеров, используя соответствующий префикс:

-webkit-appearance:none;

Это должно заботиться о любых границах, набросках и т. Д., Используя только одно свойство CSS. Для браузеров, отличных от пары WebKit и Firefox - Opera и IE, желательно также включить border и outline свойства, обеспечивающие кросс-совместимость браузера.

источник

2013-03-16 19:19:09 Blieque

К сожалению, внешний вид не поддерживается IE и Opera. –

Последний webkit, похоже, поддерживает контур: нет правильно (проверено на хром только сейчас). @ alex-shesterov, поэтому у этих свойств есть префиксы -moz или -webkit. – ohcibi

@ alex-shesterov Я сейчас кое-что добавлю о них. – Blieque

input {border:0; outline:none;}

следует удалить все границы/контуры.

источник

2013-03-16 19:20:10

Вроде бы вы больше не видите вход. – ohcibi

да, точно - но разве это не то, что вы хотели? :) try 'border: 1px solid # 000;' или 'border: thin inset;'. , пожалуйста, опишите, какой внешний вид вы ожидаете ... –

Я ничего не хотел, но OP говорит, что он хочет избавиться от контура, который отображается в Firefox, когда фокус сосредоточен. Он не говорит, что хочет, чтобы граница, которая виден во всех браузерах, исчезла. Но настройка границы, похоже, делает трюк на FF, как я сказал в своем ответе. Chrome (ium), похоже, удовлетворен только контуром: none; – ohcibi

Ответ проще, чем я reliased:

box-shadow:none;

источник

2013-09-26 21:22:22

Вы должны использовать: фокус декларации. В этом случае:

input:focus {outline:none;}

Все входные находится в вашем проекте не будет иметь синюю границу.

Если вы хотите определенный атрибут, используйте:

input[type=text]:focus {outline:none;}

Надеется, что это помогает.=)

источник

2014-07-17 13:53:11

-1

Это должно работать для большинства типов входных на Firefox:

input::-moz-focus-inner { border: 0; }

источник

2014-09-23 16:00:45 Mark

ОП запросил решение для любого браузера, а не только для FF – Jinandra

А, я неправильно прочитал комментарий в скобках во втором абзаце. Это фиксирует «внутреннюю» границу, а не другую контурную/внешнюю границу. – Mark

-1

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

HTML код

<div class='rel lef srch_blck'> 
    <input type='text' class='rel lef srch_pad' name='srch_inp'/> 
</div>

к выше HTML позволяет добавить следующие CSS, чтобы удалить Border

.srch_blck{ overflow:hidden;width:298px;height:28px; } 
.srch_pad{ left:-1px;top:-1px;width:300px;height:31px; }

источник

2016-03-01 13:34:32

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

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="url"], 
input[type="search"], 
textarea { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    border: 1px solid #ddd; 
}

Затем сбросить данную коробку-тень и очертить так:

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
textarea:focus { 
    border: 1px solid #ccc; 
    box-shadow: none !important; 
    outline: none !important; 
}

Работал для меня во всех современных браузерах, прошедших проверку (IE, FF, Chrome, Operah & Safari).

источник

2016-06-29 14:40:44 Azragh

Не нужно было перезагружать раньше. Код работает для меня без реселлинга. Протестировано на FF, Chrome и Safari, и он отлично работает. –

Правда - это не нужно, но для меня это просто чувствует себя безопаснее ..;) – Azragh

CSS - Удаление активного поля ввода

ответ

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