Як видалити контур кордону з кнопки введення

коли клацніть десь ще, кордон зникає, спробував фокусувати жодну, але не допомогло, як змусити некрасиві межі кнопки зникнути при натисканні на?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

з використанням контуру: немає; ми можемо зняти цю межу в хромі

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Фокус контури в Chrome і FF

видалено:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

Демо

Доступність (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Це працює для мене просто :)

*:focus {
    outline: 0 !important;
}

Цей працював на мене

button:focus {
    border: none;
    outline: none;
}

outlineВластивість це те , що вам потрібно. Це скорочення для встановлення кожного з наступних властивостей в одній декларації:

• outline-style
• outline-width
• outline-color

Ви можете використати outline: none;, що пропонується у прийнятій відповіді. Ви також можете бути більш конкретними, якщо хочете:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

додати, !importantякщо він використовується в Bootstrap

Щоб уникнути проблеми, викликаної під час зміни властивості контуру на фокусі, слід зробити візуальний ефект, коли користувач клацне на вхідній кнопці або натисне на неї.

У цьому випадку це тип подання, але ви також можете застосувати до типу = "кнопка".

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

Встановіть як outlineі box-shadowвластивості кнопки, noneі зробіть їх важливими .

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

Причина встановлення значень важливих полягає в тому, що, якщо ви використовуєте інші бібліотеки CSS або фреймворки, такі як Bootstrap, вони можуть переотриматись.

Це дуже просто, ніж ви думаєте. Коли фокусується кнопка, застосуйте outlineвластивість так:

button:focus {
    outline: 0 !important;
}

Але коли я використовую noneзначення, це не працює для мене.

Видалення доступної для події несезорії не є хорошою ідеєю для стандартних веб-розробок. в будь-якому випадку, якщо ви шукаєте рішення, що видаляє лише контур, не вирішує проблему. ви також повинні прибрати тінь синього кольору. для конкретних сценаріїв використовуйте окреме ім'я класу, щоб виділити цей спеціальний стиль до вашої кнопки.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Краще зробіть це

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Видалення контуру - кошмар доступності. Люди, що користуються клавіатурою, використовуючи клавіатури, ніколи не дізнаються, на якому предметі вони входять.

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

.no-outline {
  outline: none;
}

Тоді ви можете застосувати цей клас, коли вам потрібно.

З огляду на html нижче:

<button class="btn-without-border"> Submit </button>

У стилі css виконайте наступне:

.btn-without-border:focus {
    border: none;
    outline: none;
}

Цей код видалить межу кнопки та відключить фокусування межі кнопки при натисканні кнопки.

Як багато інших згадали, selector:focus {outline: none;}ця рамка буде видалена, але ця межа є ключовою функцією доступності, яка дозволяє користувачам клавіатури знаходити кнопку і не повинна буде видалена, слід видаляти.

Оскільки ваше занепокоєння здається естетичним, вам слід знати, що ви можете змінити колір, стиль та ширину контуру, зробивши його краще вписуючись у стиль вашого веб-сайту.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Стенограма:

selector:focus {
  outline: 1px dashed red;
}