html - How can I move the option box to the right using CSS?
问题描述
How can I move the option box to the right using CSS? When the dropdown is pressed, I want a box of options to be shown on the right. What should I do?
.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>
Thank you.
解决方案
One option is to change the direction to rtl
for those elements. A possible drawback is that it moves the arrow icon to the left. You can set opacity to zero for Webkit browsers to hide it, though.
.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>
推荐阅读
- swift - 从文件(不是 JSON)读取数据并转换为对象
- .net - 在 Linux 中构建部署到 windows
- java - Android - 通过改造调用 API 时显示加载栏
- web-applications - 就项目使用的技术寻求建议:ORM、构建反应式接口等
- java - jdbcTemplate Mockito 单元测试
- c - 在 Makefile 中设置库的标志
- java - 使两个类在一个接口中协同工作
- r - 如何修复“数据将正确绘制绘图/数据更改”
- vue.js - 将 Vue 生成的 Web 组件加载到也是 Vue 应用程序的主机/父级时出现 Vuetify 错误
- c++ - 函数的默认值作为函数参数