Мені цікаво, чи можливо видалити синє та жовте світіння за замовчуванням, коли натискаю на область введення / введення тексту за допомогою CSS?
Мені цікаво, чи можливо видалити синє та жовте світіння за замовчуванням, коли натискаю на область введення / введення тексту за допомогою CSS?
Відповіді:
textarea, select, input, button { outline: none; }
Хоча, стверджувалося, що збереження світіння / контуру насправді вигідно для доступності, оскільки може допомогти користувачам побачити, на який елемент в даний час зосереджено.
Ви також можете використовувати псевдоелемент ": focus" для націлювання на входи лише тоді, коли користувач обрав їх.
Цей ефект може виникнути і на невхідних елементах. Наступні роботи я знайшов як більш загальне рішення
:focus {
outline-color: transparent;
outline-style: none;
}
Оновлення: можливо, вам не доведеться використовувати :focus
селектор. Якщо у вас є елемент, скажімо <div id="mydiv">stuff</div>
, і ви отримували зовнішнє сяйво на цьому елементі Div, просто застосуйте як звичайне:
#mydiv {
outline-color: transparent;
outline-style: none;
}
<button>
елементів, які не особливо корисні від зосередження фокусу, оскільки в основному ви все одно натискаєте на нього.
45.0.2454.101 m
:focus
для селектора, я просто помістив outline-color
і outline-style
на css свого дива.
Про розмір текстових областей у веб-браузерах на веб-сайтах:
Встановлення максимальної висоти та максимальної ширини на текстовій області не зніме візуальний розмір ручки. Спробуйте:
resize: none;
(і так, я погоджуюся з "намагайтеся уникати будь-чого, що порушує очікування користувача", але іноді це має сенс, тобто в контексті веб-програми)
Щоб налаштувати зовнішній вигляд елементів форми веб-кадру з нуля:
-webkit-appearance: none;
none
, both
, horizontal
, vertical
і inherit
.
Карл W :
Цей ефект може виникнути і на невхідних елементах. Наступні роботи я знайшов як більш загальне рішення
:focus { outline-color: transparent; outline-style: none; }
Я поясню це:
:focus
означає, що він стилює елементи, які перебувають у фокусі. Тож ми стилізуємо елементи у фокусі.outline-color: transparent;
означає, що синє світіння прозоре.outline-style: none;
робить те саме.Це рішення для людей, які дбають про доступність .
Будь ласка, не використовуйте outline:none;
для відключення контуру фокусу. Ви вбиваєте доступність Інтернету, якщо це зробите. Існує доступний спосіб зробити це.
Перегляньте цю статтю, яку я написав, щоб пояснити, як видалити межу доступним способом.
Коротше кажучи, ідея показувати межу контуру лише тоді, коли ми виявимо користувача клавіатури. Як тільки користувач починає використовувати мишу, ми відключаємо контур. В результаті ви отримуєте найкраще з двох.
Якщо ви хочете видалити світіння з кнопок у Bootstrap (що, на мою думку, не обов'язково погано для UX), вам знадобиться наступний код:
.btn:focus, .btn:active:focus, .btn.active:focus{
outline-color: transparent;
outline-style: none;
}
.btn:active:focus
необхідно було зняти світіння, фактично утримуючи кнопку.
інколи буває, що кнопки також використовуються нижче, щоб видалити зовнішню лінію
input:hover
input:active,
input:focus,
textarea:active,
textarea:hover,
textarea:focus,
button:focus,
button:active,
button:hover
{
outline:0px !important;
}
<select class="custom-select">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<style>
.custom-select {
display: inline-block;
border: 2px solid #bbb;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f8f8f8;
-webkit-appearance:none; /* remove the strong OSX influence from Webkit */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* for Webkit's CSS-only solution */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select {
padding-right:30px;
}
}
/* Since we removed the default focus styles, we have to add our own */
.custom-select:focus {
-webkit-box-shadow: 0 0 3px 1px #c00;
-moz-box-shadow: 0 0 3px 1px #c00;
box-shadow: 0 0 3px 1px #c00;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #bbb;
color: white;
pointer-events:none;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
</style>
Мені здається корисним зняти контур на кнопці введення типу "розсувні двері", оскільки контур не покриває правильний "ковпачок" зображення розсувних дверей, завдяки чому стан фокусу виглядає трохи непростим.
input.slidingdoorbutton:focus { outline: none;}
Мені просто потрібно було видалити цей ефект із моїх полів введення тексту, і я не міг змусити інших методів працювати цілком правильно, але це те, що працює для мене;
input[type="text"], input[type="text"]:focus{
outline: 0;
border:none;
box-shadow:none;
}
Тестували в Firefox та Chrome.
Звичайно! Також ви можете видалити синю межу з усіх елементів HTML за допомогою *
*{
outline-color: transparent;
outline-style: none;
}
І
*{
outline: none;
}