Видаліть рамку від кнопок

109

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

Хтось знає, як зняти цю сіру рамку з кнопки, тож це лише саме зображення? Дякую.

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;до кнопок. Візьміть пік у скрипці і подивіться, чи працює це для вас.

— Вестріда

37

Це, здається, працює на мене ідеально.

button:focus { outline: none; }

— Даніель Лі
джерело

4

outline:none;не рекомендується з міркувань доступності. Якщо вам потрібно видалити межу фокусування, надайте іншим способам, щоб користувачі могли бачити, що вона має фокус. outlinenone.com

— Vestride

9

У мене була така ж проблема, і, хоча я стилізував свою кнопку в CSS, вона ніколи не підніметься, border:noneале те, що спрацювало, було додавати стиль безпосередньо на кнопку введення так:

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

— Блоха
джерело

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

— DrCord

2

Спробуйте використовувати: border:0;абоborder:none;

— Філіпе Мануель
джерело

1

Звичайна хитрість - зробити саме зображення частиною посилання замість кнопки. Потім ви пов'язуєте подію "натискання" зі спеціальним обробником.

Такі рамки, як 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 (["межа: жодна; колір фону: білий; padding: 0"]);

— КенДев
джерело

3

Lol вам не слід використовувати jquery для зміни стилю css

— zardilior