輸入失去其距時同級的不透明度變化

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> 

當輸入具有焦點（即指針是內部）和小鼠超過cancel按鈕 - 輸入失去其左邊距！

完整的代碼是here

Answer 1

因爲的，rightok懸停，及其影響的兄弟

去除一部分，測試

.leftcancel:hover, .rightok:hover{ 
    //opacity:0.8; 
} 

fiddle

更新：

，使其與透明度的工作，加position和z-index至.leftcancel和.rightok

您在.leftcancel和.rightok上設置的不透明度正在創建新的堆疊上下文，並且堆疊上下文會影響z索引。由於您沒有手動指定z索引，因此它們將被自動分配，並且.leftcancel和.rightok的值比#inpnew的值高，因爲它稍後會在標記中出現。

參考：W3C Color Module

如果不透明度小於1的元素沒有被定位，實現必須在將它是否可以使用相同的堆疊順序油漆它創建，其父堆疊上下文內的層，是'z-index：0'和'不透明度：1'的定位元素。

*{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t box-sizing:border-box; 
 
\t -moz-box-sizing:border-box; 
 
\t -webkit-box-sizing:border-box; 
 
} 
 

 
#mdnew{ 
 
\t position:fixed; 
 
\t z-index:2; 
 
\t width:300px; 
 
\t left:calc(50% - 150px); 
 
\t top:63px; 
 
\t background: red; 
 
\t border-radius:5px; 
 
\t overflow:hidden; 
 
} 
 

 
#inpnew{ 
 
    
 
    
 
\t display:block; 
 
\t width:calc(100% - 28px); 
 
\t margin:14px auto; 
 
\t line-height:21px; 
 
\t outline:none; 
 
\t border:1px solid #999; 
 
\t border-radius:5px; 
 
\t padding:0 7px; 
 
} 
 

 
.leftcancel{ 
 
    position:relative; 
 
    z-index:5; 
 
\t float:left; 
 
\t width:50%; 
 
\t line-height:23px; 
 
\t cursor:pointer; 
 
\t text-align:center; 
 
} 
 

 
.rightok{ 
 
    position:relative; 
 
    z-index:5; 
 
\t float:right; 
 
\t width:50%; 
 
\t line-height:23px; 
 
\t cursor:pointer; 
 
\t text-align:center; 
 
} 
 

 
.leftcancel:hover, .rightok:hover{ 
 
\t opacity:0.8; 
 
} 
 

 
.gblue{ 
 
\t background: -webkit-linear-gradient(to top, #003b61, #0099cc); 
 
\t background: linear-gradient(to top, #003b61, #0099cc); 
 
\t color:white; 
 
\t letter-spacing:0.5px; 
 
} 
 

 
.mdtitle{ 
 
\t line-height:23px; 
 
\t text-align:center; 
 
\t 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>

更新小提琴是：https://jsfiddle.net/5qperdzb/16/

Answer 2

包裝你input與div，它會工作。

* { 
 
    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>

這裏是Updated Fiddle ..

Answer 3

如果你計算輸入的寬度100% - 28px那麼它的安全只使用14px爲margin-left和margin-right：

#inpnew { 
    margin: 14px; 
}