更改输入类型编号的外观 [英] change the appearance of input type number
本文介绍了更改输入类型编号的外观的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试过这段代码,但什么都没发生。我需要通过图像更改箭头也旋转但我不能。
I tried this code but nothing happened. I need to change the arrows by an image also rotate but I could not.
<style>
input[type=number] {
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0 8px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]:hover::-webkit-inner-spin-button {
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
</style>
<input type="number" value="0">
http://i.stack.imgur.com/YYySO.png
http://jsfiddle.net/josefelipe87/wf0w0dhw/
推荐答案
CSS中不同浏览器的不同代码
Different code for different browser in CSS
对于mozila
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
适用于Chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
这篇关于更改输入类型编号的外观的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文