Как изменить изображение кнопки ввода с помощью CSS?

Question

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

<INPUT type="image" src="/images/Btn.PNG" value=""> 

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

<INPUT type="image" class="myButton" value=""> 

где «MyButton» определяется в файле CSS, как

.myButton { 
    background:url(/images/Btn.PNG) no-repeat; 
    cursor:pointer; 
    width: 200px; 
    height: 100px; 
    border: none; 
} 

Если это все, что я хотел сделать, я мог бы использовать оригинальный стиль, но я хочу изменить внешний вид кнопки при наведении (с использованием класса myButton:hover). Я знаю, что ссылки хороши, потому что я смог загрузить их для фонового изображения для других частей страницы (точно так же, как проверка). Я нашел примеры в Интернете, как это сделать, используя JavaScript, но я ищу решение для CSS.

Я использую Firefox 3.0.3, если это имеет значение.

Answer 1

Если вы хотите стилизовать кнопку с помощью CSS, сделайте ее кнопкой = «отправить» вместо типа = «образ». type = "image" ожидает SRC, который вы не можете установить в CSS.

Обратите внимание, что Safari не позволит вам создавать любую кнопку в том виде, в котором вы ищете. Если вам нужна поддержка Safari, вам нужно поместить изображение и иметь функцию onclick, которая отправляет форму.

Answer 2

Эта статья о CSS image replacement for submit buttons может помочь.

«Используя этот метод, вы получите интерактивное изображение, когда таблицы стилей активны, и стандартную кнопку, когда таблицы стилей отключены. Фокус в том, чтобы применить методы замены изображения к тегу кнопки и использовать его как отправьте кнопку, вместо того, чтобы использовать вход.

И поскольку границы кнопок стираются, рекомендуется также изменить курсор на ручную форму, используемую для ссылок, так как это обеспечивает зрительный отзыв для пользователей ».

Код CSS:

#replacement-1 { 
    width: 100px; 
    height: 55px; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    background: transparent url(image.gif) no-repeat center top; 
    text-indent: -1000em; 
    cursor: pointer; /* hand-shaped cursor */ 
    cursor: hand; /* for IE 5.x */ 
} 

#replacement-2 { 
    width: 100px; 
    height: 55px; 
    padding: 55px 0 0; 
    margin: 0; 
    border: 0; 
    background: transparent url(image.gif) no-repeat center top; 
    overflow: hidden; 
    cursor: pointer; /* hand-shaped cursor */ 
    cursor: hand; /* for IE 5.x */ 
} 
form>#replacement-2 { /* For non-IE browsers*/ 
    height: 0px; 
} 

Answer 3

Вы можете использовать <button> тег. Для отправки просто добавьте type="submit". Затем используйте фоновое изображение, если вы хотите, чтобы кнопка отображалась как графическая.

Как так:

<button type="submit" style="border: 0; background: transparent"> 
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" /> 
</button> 

Подробнее: http://htmldog.com/reference/htmltags/button/

Answer 4

Может быть, вы могли бы просто импортировать файл .js, а также и иметь замену изображения там, в JavaScript.

Answer 5

HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div> 

CSS

div.myButton input { 
    background:url(/images/Btn.PNG) no-repeat; 
    cursor:pointer; 
    width: 200px; 
    height: 100px; 
    border: none; 
} 

Это будет работать в любом месте, даже в Safari.

Answer 6

Вот простое решение, но без дополнительных окружающих DIV:

<input type="submit" value="Submit"> 

CSS-использует базовую технику замены изображения. Для бонусных баллов, он показывает с помощью спрайт изображения:

<style> 
    input[type="submit"] { 
     border: 0; 
     background: url('sprite.png') no-repeat -40px left; 
     text-indent: -9999em; 
     line-height:3000; 
     width: 50px; 
     height: 20px; 
    } 
</style> 

Источник: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Answer 7

Вот что работает для меня на Internet Explorer, с небольшим изменением в раствор Philoye.

>#divbutton 
{ 
    position:relative; 
    top:-64px; 
    left:210px; 
    background: transparent url("../../images/login_go.png") no-repeat; 
    line-height:3000; 
    width:33px; 
    height:32px; 
    border:none; 
    cursor:pointer; 
} 

Answer 8

Вы можете использовать blank.gif (1px прозрачное изображение) в качестве цели в теге

<input type="image" src="img/blank.gif" class="button"> 

, а затем стиль фона в CSS:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;} 
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;} 

Answer 9

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

<div id="myButton"> 
    <input id="myInputButton" type="submit" name="" value=""> 
</div> 

#myButton { 
background: url("form_send_button.gif") no-repeat; 
width: 62px; 
height: 24px; 
} 

#myInputButton { 
background: url("form_send_button.gif") no-repeat; 
opacity: 0; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
filter: alpha(opacity=0); 
width: 67px; 
height: 26px; 
cursor: pointer; 
cursor: hand; 
} 

Answer 10

Я думаю, что следующие является лучшим решением:

CSS:

.edit-button { 
    background-image: url(edit.png); 
    background-size: 100%; 
    background-repeat:no-repeat; 
    width: 24px; 
    height: 24px; 
} 

HTML:

<input class="edit-button" type="image" src="transparent.png" /> 

Answer 11

Мое решение без JS и без изображений это:

* HTML:

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data"> 

* CSS:

.continue_shopping_2:hover{ 
background-color:#FF9933; 
text-decoration:none; 
color:#FFFFFF;} 


.continue_shopping_2{ 
padding:0 0 3px 0; 
cursor:pointer; 
background-color:#EC5500; 
display:block; 
text-align:center; 
margin-top:8px; 
width:174px; 
height:21px; 
border-radius:5px; 
border-width:1px; 
border-style:solid; 
border-color:#919191; 
font-family:Verdana; 
font-size:13px; 
font-style:normal; 
line-height:normal; 
font-weight:bold; 
color:#FFFFFF;}