Html CSS 按钮值样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13489679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Button Value Styling
提问by TMNuclear
If I have this line of code:
如果我有这行代码：
<input type="submit" class="mybutton" name="add" value="Add new"/>
How can I use CSS to style the buttons value? I need to add an image before it's value, therefore I'd need this line of code at the value output:
如何使用 CSS 设置按钮值的样式？我需要在它的值之前添加一个图像，因此我需要在值输出中使用这行代码：
<span class="add">Add new</span>
I tried things like:
我试过这样的事情：
<input type="submit" class="mybutton" name="add" value="">
<span class="add">Add new</span></input>
haha, but this totally doesn't make any sense.
哈哈，但这完全没有任何意义。
Anyone a good tip?
任何人的好提示？
EDIT
编辑
Wow thanks for the great fast responses. Forgot to mention that I use a .CSS file of "sexybuttons", so I can't change the styling and need other approach.
哇感谢您的快速响应。忘了说我使用了“sexybuttons”的 .CSS 文件，所以我不能改变样式，需要其他方法。
<button type="submit">
Is what I was looking for. Thanks alot all.
是我要找的。非常感谢大家。
回答by Henrik
You could try using the buttontag instead of input.
您可以尝试使用button标签而不是input.
<button type="submit" class="mybutton" name="add">
<img src="path_to_image">
<span class="add">Add new</span>
</button>
Or you could set a background-imagefor the button using CSS.
或者您可以background-image使用 CSS 为按钮设置 a 。
回答by RTB
You can set a background image using css and apply that to the button like this:
您可以使用 css 设置背景图像并将其应用于按钮，如下所示：
css:
css：
input[type=button],input[type=submit],button{
background:url(images/btn-verzend.jpg) no-repeat;
width:91px;
height:35px;
line-height:35px;
border:none;
color:#FFF;
cursor:pointer;
}
html:
html：
<input type="submit" name="add" value="Send" />
<input type="button" name="add" value="Send" />
<button>Send</button>
That worked for me.
那对我有用。
回答by Shailender Arora
i hope you are looking this...........
我希望你正在看这个…………
HTML
HTML
<input type="submit" class="mybutton" name="add" value=""/>
CSS
CSS
.mybutton {
background: url(http://coursesandevents.anjaschuetz.net/wp-content/uploads/2010/01/submit_button_large_red.jpg) no-repeat 0 0;
width:248px;
height:262px;
border:none;
}
回答by Jhonathan H.
<input type="submit" class="mybutton" name="add" value="Add new"/>
then add a css
然后添加一个css
.mybutton{
// use css background attributes
background:transaparent url(//image);
}
回答by Roman
回答by james
<input type="submit" class="mybutton" name="add" value="Add new"/>
.mybutton{
background:url(image.jpg)no-repeat;
height:12px;
width:12px;
color:#fff;
border:none
}
回答by Sowmya
HTML
HTML
<input type="submit" class="mybutton" name="add" value="Add New" />?
CSS
CSS
input{
background:#58D3F7 url(http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/home.png) no-repeat left;
background-size:20px;
padding:10px 25px;
text-align:center;
border:none; border-radius:3px; cursor:pointer
}?
回答by ninjacoder
You could also do this:
你也可以这样做：
<span id="addSubmitButton" class="add" class="mybutton">Add new</span>
Then add this to the css:
然后将其添加到css中：
.mybutton:before{
content:"url(image.jpg)";
}
or you can use jquery to do it without changing your original code as shown below:
或者您可以使用 jquery 在不更改原始代码的情况下执行此操作，如下所示：
$("#addSubmitButton").before("<img src='image.jpg' alt='image'/>");
