Style 3 inputs below each other - html

Question

I've got a form, and I've got a "+" button, text input and "-" button, as the below image shows. I've got a problem, because I can't style it to look it like on picture on all browsers.
Expected:
This is how it looks on my page:
On Chrome looks: And on
Safari: And on
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' />

Answer 1

This 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 => button, 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' />

Answer 2

This seems to work for me in Firefox, IE and Chrome.
Here's an example fiddle: 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;
}