CSS/窗体下拉箭头定位
CSS/窗体下拉箭头定位
提问于 2018-08-06 17:51:54
因此，我正在尝试编写一个“添加到购物车”区域，您可以在几个产品选项之间进行选择，然后单击一个按钮并将它们添加到购物车中。
<form class="add-to-cart-form">
<select class="product-select-dropdown">
<option> select your option </option>
<option value="onewk"> 7 Nights</option>
<option value="twowk" selected> 14 Nights </option>
<option value="fourwk"> 28 Nights</option>
</select>
<input type="submit" value="submit">
</form>
唯一的CSS我有它一般的样式，但我有很多问题与下拉/箭头本身。
这是默认的选择，箭头在它自己和选择框之间有一个奇怪的间隙，另外，点击箭头不会做任何事情，你必须单击选择框才能让它下拉。我希望箭头连接到选择框，并在单击时启动下拉列表。
有没有我不知道的CSS在做这件事？(我在一个很大的网站上工作，其中有很多文件都不是我创建的。)如果是，如何清除它，或者如何移动箭头并恢复功能？
编辑:完全隐藏/删除箭头元素，并添加自定义下拉箭头是不是更好？
在将额外的填充添加到内部框时，会发生以下情况。
.product-select-dropdown{
border: 1px solid #000000;
height: 33px;
font-size: 14.3px;
border-radius: 0;
background-color: #FFFFFF;
line-height: 1em;
padding: 9px 13px 6px;}这是我在原版上使用的CSS，但正如我所说的，我使用的是我继承的一个网站(在wordpress上运行)，有很多文件和CSS可能会在这里应用，但我并不知道。我是个实习生，而且我还是个新人。(感谢您的帮助！！)
回答 1
Stack Overflow用户
发布于 2018-08-06 17:57:33
使用下面的代码来实现相同的效果
select {
float: left;
}
input {
PADDING: 0 6PX;
}<form class="add-to-cart-form">
<select class="product-select-dropdown">
<option> select your option </option>
<option value="onewk"> 7 Nights</option>
<option value="twowk" selected> 14 Nights </option>
<option value="fourwk"> 28 Nights</option>
</select>
<input type="submit" value="submit">
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51704880
复制相关文章
相似问题
腾讯云开发者
