Style 3 entrances below each other
I have a form and I have a "+" button, text input and a "-" button as shown in the image below. I have a problem because I cannot style it to look like in the picture in all browsers.
Expected:This is how it looks on my page:
In Chrome it looks like: And then Safari: And then Explorer:
Here is the CSS code:
.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' />
+3
source to share
2 answers
It works
.qty {
background: none repeat scroll 0 0 black;
border-width: 2px;
font-weight: bold;
height: 20px;
width: 34px;
cursor: pointer;
}
input.minus {
border-color: #ff6100 #ff6100 black;
border-radius: 4px 4px 0 0;
border-style: solid solid none;
color: #ff6100;
}
input.plus {
border-color: black #ff6100 #ff6100;
border-radius: 0 0 4px 4px;
border-style: none solid solid;
color: #ff6100;
padding-top: 4px;
}
input.num {
border-color: black #ff6100;
border-style: none solid;
color: white;
display: block;
font-family: "Open Sans",sans-serif;
font-size: 15px;
margin-top: -1px;
pointer-events: none;
}
text =>, class changed
<input type='button' value='-' class='qty minus' field='quantity' />
<input type='button' name='quantity' value='0' class='qty num' readonly />
<input type='button' value='+' class='qty plus' field='quantity' />
0
source to share
This works for me in Firefox, IE and Chrome.
Here's a sample script: http://jsfiddle.net/rucaj2cr/10/
Html
<input type='button' value='-' class='qty qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' readonly />
<input type='button' value='+' class='qty qtyplus' field='quantity' />
CSS
.qty {
height: 20px;
text-align: center;
display: block;
border-left: 2px solid #ff6100;
border-right: 2px solid #ff6100;
background: black;
font-weight: bold;
padding: 0;
margin: 0;
}
input.qtyplus {
border-bottom: 2px solid #ff6100;
border-top: 2px black;
color: #ff6100;
border-radius: 0 0 4px 4px;
width: 34px;
}
input.qtyminus {
border-top: 2px solid #ff6100;
border-bottom: 2px black;
color: #ff6100;
border-radius: 4px 4px 0 0;
width: 34px;
}
input[type=text] {
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
border-top: 2px black;
border-bottom: 2px black;
margin-top: -1px;
width: 30px;
}
0
source to share