如何使用 CSS 將選項框向右移動？當下拉選單被按下時，我希望在右側顯示一個選項框。我該怎么辦？
.input{
border-radius: 20px;
width: 30%;
border: 3px solid #0026ff;
padding: 10px;
text-align: center;
}
.center{
text-align: center;
}
h1{
text-align: center;
left: 50%;
}<h1>From</h1>
</br>
<div class="center">
<input class="input" list="station" placeholder="Start typing...">
<datalist class="list" id="station">
<option>a</option>
<option>b</option>
<option>c</option>
</datalist>
</div>
</br>
<h1>To</h1>
</br>
<div class="center">
<input class="input" list="station" placeholder="Start typing...">
<datalist class="list" id="station">
<option>a</option>
<option>b</option>
<option>c</option>
</datalist>
</div>
謝謝你。
uj5u.com熱心網友回復：
一種選擇是將方向更改rtl為這些元素。一個可能的缺點是它將箭頭圖示向左移動。不過，您可以將 Webkit 瀏覽器的不透明度設定為零以隱藏它。
.input {
border-radius: 20px;
width: 80%;
border: 3px solid #0026ff;
padding: 10px;
text-align: center;
}
.center {
text-align: center;
}
h1 {
text-align: center;
left: 50%;
}
input::-webkit-calendar-picker-indicator {
opacity: 0;
}<h1>From</h1>
<div class="center" dir="rtl">
<input class="input" list="station" placeholder="Start typing...">
<datalist class="list" id="station">
<option>a</option>
<option>b</option>
<option>c</option>
</datalist>
</div>
<h1>To</h1>
<div class="center" dir="rtl">
<input class="input" list="station" placeholder="Start typing...">
<datalist class="list" id="station">
<option>a</option>
<option>b</option>
<option>c</option>
</datalist>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328514.html