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

Question

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

Answer 1

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

input { 
    border: 0; 
} 

Answer 2

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

border: 1px solid black; 

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

Answer 3

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

Answer 4

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

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

И КСС:

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

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

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

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

Answer 6

Вы можете что-то вроде следующего в таблице стилей (или внутри на <style>...</style> тега на странице) и использовать некоторые дополнительные CSS селектор:

input[type=submit], input[type=button], /* Advanced CSS selectors */ 
input.button /* For older browsers you can add a 'button' class to each button where you want a bkg img */ 
{ 
    border: 0; 
    background-image: url("/images/foo.png"); 
} 

Answer 7

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

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

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

Answer 8

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

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

Answer 9

Вы можете использовать любой IMG в качестве фона (например, прозрачные скругленные углы), только в CSS добавить «цвет фона: прозрачный;»

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

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

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

CSS-что сделал трюк для меня было:

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

граница: 0; удаляет 3D-скос (стиль рамки), затем я заменяю его на плоскую перспективную рамку, которая отлично рисуется как в IE8, так и в Chrome.