相對於文本輸入的元素位置

我有以下挑戰。當用戶在輸入字段中輸入字符時，我想顯示一個位於輸入中心右側的重置按鈕。相對於文本輸入的元素位置

我無法更改標籤，輸入，按鈕和錯誤消息的html結構。我不想使用瀏覽器支持。有人有一個創造性的想法如何做到這一點？提前致謝。你想留下來，因爲它現在是有<div style="display: inline-block;position:relative;">

label { 
 
    display: block; 
 
} 
 

 
.btn { 
 
    padding: 10px; 
 
    background-color: green; 
 
    color: #fff; 
 
} 
 

 
input { 
 
    padding: 10px; 
 
}

<div class="shopping-cart-coupon"> 
 
    <div class="form-group"> 
 
    <label for="coupon">Coupon</label> 
 
    <input name="coupon" type="text" id="coupon"> 
 
    <a id="" style="" class="btn" href=''>Activate</a> 
 
    <span style="display:block;color:red;">Error message</span> 
 
    <a class="reset">x</a> 
 
    </div> 
 
</div>

來源

2016-02-26 NiZa

其實，我已經知道我不能用'位置解決這個問題：absolute'，因爲你必須與標籤，並可能處理，錯誤消息。所以說實話，因爲我超出了我的解決方案。而''before''前'僞元素不適用於輸入。 – NiZa

@NiZa我已經添加了一個通用策略的答案，但是如果你更好地解釋你希望你的重置按鈕的位置（*正確* *內部/外部的內容），我可以詳細說明它。 –

@AlinPurcaru對齊應該垂直於輸入字段。 – NiZa

.form-group { 
 
    position: relative; 
 
} 
 

 
label { 
 
    display: block; 
 
} 
 

 
.btn { 
 
    padding: 10px; 
 
    background-color: green; 
 
    color: #fff; 
 
} 
 

 
input { 
 
    padding: 10px; 
 
} 
 

 
.reset { 
 
    margin-left: -20px; 
 
    margin-top: 10px; 
 
    position: absolute; 
 
}

<div class="shopping-cart-coupon"> 
 
    <div class="form-group"> 
 
    <label for="coupon">Coupon</label> 
 
    <input name="coupon" type="text" id="coupon"> 
 
    <a class="reset">x</a> 
 
    <a id="" style="" class="btn" href=''>Activate</a> 
 
    <span style="display:block;color:red;">Error message</span> 
 
    </div> 
 
</div>

來源

2016-02-26 12:10:33 NiZa

不要忘記設置一個更大的填充權限。 –

大綱

總結什麼。這會創建一個定位上下文，您可以在其中定位任何內容。然後將您的重置按鈕的位置設置爲position: absolute以及您需要的偏移量，內部和相對於您創建的包裝。

這是一個嘗試，但我不確定是否理解了你的場景。

label { 
 
    display: block; 
 
} 
 

 
.btn { 
 
    padding: 10px; 
 
    background-color: green; 
 
    color: #fff; 
 
} 
 

 
input { 
 
    padding: 10px; 
 
} 
 

 
.input-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.reset { 
 
    position: absolute; 
 
    right: 3px; 
 
    top: 7px; 
 
}

<div class="shopping-cart-coupon"> 
 
    <div class="form-group"> 
 
    <label for="coupon">Coupon</label> 
 
    <div class="input-wrapper"> 
 
     <input name="coupon" type="text" id="coupon"> 
 
     <a class="reset">x</a> 
 
    </div> 
 
    <a id="" style="" class="btn" href=''>Activate</a> 
 
    <span style="display:block;color:red;">Error message</span> 
 
    </div> 
 
</div>

來源

2016-02-26 11:47:06

看到我最後一個問題的評論。 html訂單需要標籤然後輸入。沒有任何HTML之間。 – NiZa

相對於文本輸入的元素位置

回答

相關問題