input loses its margin when opacity of sibling changes - html

Question

<div id='mdnew'>
<div class=' gblue mdtitle'>NEW TAG</div>
<input id='inpnew' type='text' autocomplete='off' maxlength=25 placeholder='NEW TAG'>
<div class='gblue leftcancel'>CANCEL</div>
<div class='gblue rightok' id='newok'>OK</div>
<div class='clear'></div>
</div>
when input has focus (i.e. pointer is inside) and mouse is over cancel button - input loses its left margin !
complete code is here

Answer 1

Wrap your input with div and it will work.
* {
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#mdnew {
position:fixed;
z-index:2;
width:300px;
left:calc(50% - 150px);
top:63px;
background: red;
border-radius:5px;
overflow:hidden;
}
#inpnew {
display:block;
width:calc(100% - 28px);
margin:14px auto;
line-height:21px;
outline:none;
border:1px solid #999;
border-radius:5px;
padding:0 7px;
}
.leftcancel {
float:left;
width:50%;
line-height:23px;
cursor:pointer;
text-align:center;
}
.rightok {
float:right;
width:50%;
line-height:23px;
cursor:pointer;
text-align:center;
}
.leftcancel:hover, .rightok:hover {
opacity:0.8;
}
.gblue {
background: -webkit-linear-gradient(to top, #003b61, #0099cc);
background: linear-gradient(to top, #003b61, #0099cc);
color:white;
letter-spacing:0.5px;
}
.mdtitle {
line-height:23px;
text-align:center;
letter-spacing:0.5px;
}
<div id="mdnew">
<div class=" gblue mdtitle">NEW TAG</div>
<div>
<input id="inpnew" type="text" autocomplete="off" maxlength="25" placeholder="NEW TAG" >
</div>
<div class="gblue leftcancel">CANCEL</div>
<div class="gblue rightok" id="newok">OK</div>
<div class="clear"></div>
</div>
Here is the Updated Fiddle..

Answer 2

Its because opacity of .leftcancel,rightok on hover, its effecting to the sibling
remove that part and test
.leftcancel:hover, .rightok:hover{
//opacity:0.8;
}
fiddle
Update :
To make it work with opacity, add position and z-index to .leftcancel and .rightok
The opacity you're setting on .leftcancel and .rightok is creating a new stacking context, and stacking contexts affect z-indexes. Since you didn't specify z-indexes manually, they're being auto assigned, and .leftcancel and .rightok has a higher value than #inpnew because it comes later in the markup.
Reference : W3C Color Module
If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#mdnew{
position:fixed;
z-index:2;
width:300px;
left:calc(50% - 150px);
top:63px;
background: red;
border-radius:5px;
overflow:hidden;
}
#inpnew{
display:block;
width:calc(100% - 28px);
margin:14px auto;
line-height:21px;
outline:none;
border:1px solid #999;
border-radius:5px;
padding:0 7px;
}
.leftcancel{
position:relative;
z-index:5;
float:left;
width:50%;
line-height:23px;
cursor:pointer;
text-align:center;
}
.rightok{
position:relative;
z-index:5;
float:right;
width:50%;
line-height:23px;
cursor:pointer;
text-align:center;
}
.leftcancel:hover, .rightok:hover{
opacity:0.8;
}
.gblue{
background: -webkit-linear-gradient(to top, #003b61, #0099cc);
background: linear-gradient(to top, #003b61, #0099cc);
color:white;
letter-spacing:0.5px;
}
.mdtitle{
line-height:23px;
text-align:center;
letter-spacing:0.5px;
}
<div id='mdnew'>
<div class=' gblue mdtitle'>NEW TAG</div>
<input id='inpnew' type='text' autocomplete='off' maxlength=25 placeholder='NEW TAG'>
<div class='gblue leftcancel'>CANCEL</div>
<div class='gblue rightok' id='newok'>OK</div>
<div class='clear'></div>
</div>
Updated fiddle is : https://jsfiddle.net/5qperdzb/16/

Answer 3

If you're calculating input's width as 100% - 28px then it's safe to just use 14px for margin-left and margin-right:
#inpnew {
margin: 14px;
}