我有一个表单,还有一个"+"按钮、文本输入框和"-"按钮,如下图所示。我的问题在于,我无法将其样式设置成所有浏览器上的图片那样。
期望效果:
这是我的页面上它的样子:
在 Chrome 上看起来像这样:
而在
Safari :
及在
Explorer :
以下是 CSS 代码:
期望效果:
![expected style](https://istack.dev59.com/k5hM8.webp)
在 Chrome 上看起来像这样:
![enter image description here](https://istack.dev59.com/Mkb9R.webp)
![enter image description here](https://istack.dev59.com/O4dyj.webp)
![enter image description here](https://istack.dev59.com/o5FUj.webp)
.qty {
width: 34px;
height: 20px;
text-align: center;
display: block;
}
input.qtyplus {
padding-top: 4px;
width: 34px;
height: 20px;
border-bottom: 2px solid #ff6100;
border-left: 2px solid #ff6100;
border-right: 2px solid #ff6100;
border-top: 2px black;
background: black;
color: #ff6100;
font-weight: bold;
border-radius: 0 0 4px 4px
}
input.qtyminus {
width: 34px;
height: 20px;
border-top: 2px solid #ff6100;
border-left: 2px solid #ff6100;
border-right: 2px solid #ff6100;
border-bottom: 2px black;
background: black;
color: #ff6100;
font-weight: bold;
border-radius: 4px 4px 0 0;
}
input[type=text] {
background: black;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: bold;
border-left: 2px solid #ff6100;
border-right: 2px solid #ff6100;
border-top: 2px black;
border-bottom: 2px black;
height: 20px;
width: 28px;
margin-top: -1px;
}
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' readonly />
<input type='button' value='+' class='qtyplus' field='quantity' />
field
属性无效吗?你应该使用data-*
属性来定义自定义属性。 - Roko C. Buljan