Как удалить рамку контура с кнопки ввода

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

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

Установить как outlineи box-shadowсвойство кнопки на noneи сделать их важными .

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

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

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

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

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

Это намного проще, чем вы думаете. Когда кнопка находится в фокусе, примените 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;
}