Кнопка «Отправить» имеет скос, от которого я не могу избавиться

Question

Я пытаюсь избавиться от фаски и границы по умолчанию, которые большинство браузеров / ОС установили в качестве кнопок по умолчанию для кнопок «Отправить». Когда я использую CSS для добавления фонового изображения, оно просто отображает изображение на заднем плане кнопки, но скос все еще там. Есть ли способ заставить кнопку просто отображать только мое изображение? Это единственный способ сделать это, чтобы установить путь к изображению в теге src элемента ввода html?

Answer 1

Вам нужно будет удалить границу (скос) примерно так:

input {
    border: 0;
}

Answer 2

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

Answer 3

Вы можете установить атрибуты границы в CSS. Я всегда думаю

  border: 1px solid black;

выглядит красиво.

Answer 4

Если вы хотите использовать свое собственное изображение кнопки, вам нужно определить свои собственные кнопки, например:

<div class="button">
  <a href="#">Login</a>
</div>

И CSS:

div.button
{
    position: relative;
    display: block;
    float: left;
    margin: 0;
    border: 0;
    padding: 0;
    background: url(button_right_normal.gif) no-repeat right top;
}

div.button a
{
    position: relative;
    display: block;
    margin: 0;
    border: 0;
    padding: 2px 15px 5px 15px;
    height: 18px;
    background: url(button_left_normal.gif) no-repeat left top;
    color: #ffffff;
    font-size: 11px;
    text-decoration: none;
}

Answer 5

У меня была такая же проблема с кнопками ввода. На этот раз IE8 выглядел так, как будто я хотел "из коробки", и Chrome разочаровал!

CSS, который помог мне, был:

input[type="button"] {
    border: 0;
    border-width: 2px;
    border-color: white;
    border-style: solid;
}

граница: 0; удаляет трехмерный скос (стиль рамки), затем я заменяю его плоской рамкой, которая прекрасно отображается в IE8 и Chrome.

Answer 6

Вы можете использовать ЛЮБОЙ img в качестве фона (например, прозрачные скругленные углы), просто в css добавьте «background-color: transparent;»

HTML (стандартная официальная кнопка «отправить») - ничего особенного (мне не нравится смешивать код со стилем):

<input type="submit" name="submit" id="mystyle" value="send e-mail"/>

затем в css (то же самое, что и обычная ссылка, кроме границ уничтожения и фона по умолчанию)

#mystyle {
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Без CSS, как официальная кнопка отправки, с CSS независимо от того, что вы разработали.

Протестировано: Chrome, IE, Opera

Answer 7

Вы можете удалить границу, используя CSS-свойства border. Например:

<input type=button value="Hello" style="border:0">

(Конечно, вы можете переместить это в таблицу стилей.)

Answer 8

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

Никто не упомянул: background-size: cover;

Который убрал последний бит серого с кнопки.

Answer 9

Я думаю, вы можете указать, как будут выглядеть кнопка и кнопка отправки:

input[type=button], input[type=submit] { border: 0 }

Answer 10

Обратите внимание, что Safari очень упрям ​​с использованием стилевых кнопок отправки.

<button type="submit"></button>

является более гибким. Однако, если вы используете несколько кнопок в форме, IE6 имеет проблемы. IE также отправляет innerHTML элемента button, в то время как Firefox отправляет атрибут value (что более логично для меня).