Question

这是我的按钮：

<input name="Submit" type="image" src="some_button.jpg"/>

我想删除src，给它一个文本值，以及带css的样式，如下所示：

<input name="Submit" type="image" value="Next" class="mybutton"/>

问题是该值出现在Chrome和Safari中，周围有一个丑陋的灰色边框。我的研究告诉我输入type=image必须总是有一个src，但当我给它一个不可见的1x1.png时，边框会消失，但文本值也会消失。

我意识到我可以通过更改为type="submit"轻松解决此问题，但我正在将设计改造为预先存在的程序，并且必须保留type="image"才能保留脚本。

我的选择是什么？

********编辑：************

请看小提琴：https://jsfiddle.net/p486cprm/ 寻找丑陋的灰色边框。与输入边框不同。

Answer 1

您可以使用以下代码作为按钮图像，并将其文本缩进以省略按钮值。

 .buttonname {
    background: url(some_button.jpg) no-repeat;
    width: 150px; /*as per your wish*/
    height: 150px; /*as per your wish*/
    border: 0;
    text-indent: -9999px;
 }

Answer 2

＆＃13;

.btn{
width:100px;
  height:auto;
}

＆＃13;

<input class="btn" type="image" name="submit" src="http://www.clker.com/cliparts/f/d/n/5/p/g/button-red-next.svg">

＆＃13;

请仔细阅读此代码

Answer 3

好的，我解决了它：

<label for="Submit" class="mybutton">
    Next
    <input name="Submit" id="Submit" type="image" src="blank.png"/>
</label>

如何设置输入[type = image]按钮的样式，并添加文本值

3 个答案: