Убрать границу с кнопок

110

Я пробовал создавать кнопки и вставлять собственные изображения вместо стандартных изображений кнопок. Тем не менее, серая рамка от стандартных кнопок все еще остается, видна снаружи моих изображений черных кнопок.

Кто-нибудь знает, как убрать эту серую рамку с кнопки, чтобы это просто само изображение? Спасибо.

html css button

— JamesonW
источник

Попробуйте -webkit-appearance: inherit;или-webkit-appearance:initial

— Макс

1

@Brut: Я могу ошибаться, но мне кажется, что это зависит от конкретного браузера, и я почти уверен, что Джеймсону нужно что-то, что будет работать во всех современных браузерах.

— Майкл Шепер

185

Добавить

padding: 0;
border: none;
background: none;

к вашим кнопкам.

Демо:

https://jsfiddle.net/Vestride/dkr9b/

— Вестрайд
источник

Я ценю ... но я добавил, как вы сказали, в таблицу стилей, и, к сожалению, это не сработало. Должен ли я просто встроить его прямо в html, если это изменит ситуацию?

— JamesonW

Добавил background: none;к кнопкам скрипку плюс . Взгляните на скрипку и посмотрите, работает ли это для вас.

— Vestride

37

Мне кажется, это отлично работает.

button:focus { outline: none; }

— Дэниел Ли
источник

4

outline:none;не рекомендуется по причинам доступности. Если вам необходимо удалить рамку фокуса, предоставьте пользователям другой способ увидеть, что она находится в фокусе. outlinenone.com

— Вестрайд

10

У меня была такая же проблема, и хотя я стилизовал свою кнопку в CSS, она никогда не подбирала, border:noneно сработало добавление стиля непосредственно к кнопке ввода, например:

<div style="text-align:center;">
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>

— Блоха
источник

вы используете каскад CSS для замены свойства встроенным стилем. Вам следует ознакомиться с некоторыми статьями о каскаде CSS и специфике CSS.

— DrCord

3

Попробуйте использовать: border:0;илиborder:none;

— Филипе Мануэль
источник

#button {border: none; } Кажется, это работает нормально.

— Карим Шалох

1

Обычный трюк - сделать само изображение частью ссылки, а не кнопки. Затем вы привязываете событие «click» к настраиваемому обработчику.

Такие фреймворки, как Jquery-UI или Bootstrap, делают это из коробки. Кстати, использование одного из них может значительно облегчить всю концепцию приложения.

— Ядутаф
источник

1

Также можно попробовать background:none;border:0pxпуговицы.

также селекторы css - это div#yes button{..}и div#no button{..}. надеется, что это поможет

Также вы можете установить фон кнопки как изображения, вместо этого используя теги img

Или сделайте это на чистом css. лайкbackground:#555; font-weight:bold: color:#fff; padding:6px 8px;

0

Чтобы удалить стандартную синюю рамку с кнопки в фокусе кнопки:

В HTML:

<button class="new-button">New Button...</button>

И в Css

button.new-button:focus {
    outline: none;
}

Надеюсь, поможет :)

— Кайлас
источник

0

Добавьте это как css,

button[type=submit]{border:none;}

— user8826621
источник

-3

$ (". myButtonClass"). css (["граница: нет; цвет фона: белый; отступ: 0"]);

— KenDev
источник

3

Lol, вы не должны использовать jquery для изменения стиля css

— zardilior 02