Как удалить контур границы с кнопки ввода

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

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">

Ответы

Ответ 1

с использованием контура: нет; мы можем удалить эту границу в хроме

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

Ответ 2

Контуры фокуса в Chrome и FF

enter image description hereenter image description here

удалены:

enter image description here

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

демонстрация

PS:

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

Ответ 3

Он работает для меня просто:)

*:focus {
    outline: 0 !important;
}

Ответ 4

Свойство outline - это то, что вам нужно. Это сокращение для установки каждого из следующих свойств в одном объявлении:

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

Вы можете использовать outline: none;, что предлагается в принятом ответе. Вы также можете быть более конкретным, если хотите:

button {
    outline-style: none;
}

Ответ 5

Это работало для меня

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

Ответ 6

button:focus{outline:none !important;}

добавьте !important, если он используется в начальной загрузке

Ответ 7

Учитывая HTML ниже:

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

В стиле css сделайте следующее:

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

Этот код удалит границу кнопки и отключит фокус границы кнопки при нажатии кнопки.

Ответ 8

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

В этом случае это тип отправки, но вы также можете обратиться к кнопке type = "."

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

Ответ 9

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

Лучше оставить его, так как большинство нажатых кнопок приведет вас куда-нибудь в любом случае, или если вы хотите удалить контур, тогда выделите его конкретное имя класса.

.no-outline {
  outline: none;
}

Тогда вы можете применить этот класс всякий раз, когда вам нужно.

Ответ 10

Как уже упоминалось многими, selector:focus {outline: none;} удалит эту границу , но эта граница является ключевой функцией доступности, которая позволяет пользователям клавиатуры находить кнопку и не должна быть удалена.

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

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

Стенография:

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

Ответ 11

Это очень просто, чем вы думаете. Когда кнопка сфокусирована, примените свойство outline, например так:

button:focus {
    outline: 0 !important;
}

Но когда я использую значение none, оно не работает для меня.