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

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

<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, если это имеет значение.

178
css input-button-image

11 ответов

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

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

116

можно использовать <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/

107

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.

71

этой статье замена изображения CSS для кнопок могу помочь.

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

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

код 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;
}
25

вот более простое решение, но без дополнительных окружающих 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/

12

Вы можете использовать пустые.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;}
2

вариация на предыдущие ответы. Я обнаружил, что прозрачность должна быть установлена, конечно, это будет работать в 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;
}
2

вот что сработало для меня в 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;
}
2

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

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" />
2

мое решение без 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;}
1

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

0