英文:
How to remove the HTML select tag's default arrow?
问题
我正在使用vuejs和tailwindcss。
如何删除HTML选择元素的默认箭头？
我已经尝试使用CSS删除外观：
select {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
以及使用tailwind的appearance-none类：
<select :onchange="selectChanged()"
class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref="eventSelect">
我的当前模板代码如下：
<template>
<div>
<select :onchange="selectChanged()"
class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref="eventSelect">
<option class="bg-slate-800">50m </option>
<option class="bg-slate-800"> 60m </option>
<option class="bg-slate-800"> 100m </option>
<option class="bg-slate-800"> 300m </option>
</select>
</div>
</template>
它的外观如下图所示：
我似乎无法将其删除，不知何故 
英文:
I am using vuejs and tailwindcss.
How do I remove the default arrow from HTML select's element?
I've already tried removing appearance with css:
select {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
as well as with tailwind's appearance-none
<select :onchange="selectChanged()"
class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref=" eventSelect">
My current template code:
<template>
<div>
<select :onchange="selectChanged()"
class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref=" eventSelect">
<option class="bg-slate-800">50m </option>
<option class="bg-slate-800"> 60m </option>
<option class="bg-slate-800"> 100m </option>
<option class="bg-slate-800"> 300m </option>
</select>
</div>
</template>
It looks like this:
I just can't seem to get it removed for some reason
答案1
得分: 2
几周后，我找到了适合我的解决方案...
由于某种原因（可能是vuejs的默认设置），<select>元素被样式化为包含箭头的背景图像。如果将其移除，仍会保留默认填充，为了重置这两个值，我添加了以下内容：
<style>
select {
background: none;
padding: 0;
}
</style>
英文:
After couple of weeks I found something that have worked for me...
For some reason (probably vuejs default settings) the <select> element is styled with background image that contains an arrow. If you remove it, you are still left with default padding, so to reset those two values, I added this:
<style>
select {
background: none;
padding: 0;
}
</style>
答案2
得分: 0
.custom-select {
/* 隐藏默认箭头 */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
<select class="custom-select">
<option value="option1">选项 1</option>
<option value="option2">选项 2</option>
<option value="option3">选项 3</option>
</select>
如你所见，以下代码行按预期工作，我猜你需要确保你的 CSS 正常工作并且你的样式应用到你的 HTML 中。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.custom-select {
/* Hide the default arrow */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
<!-- language: lang-html -->
<select class="custom-select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<!-- end snippet -->
as you can see the following line of code works as expected, I guess you need to make sure that your CSS is working properly and your styles are applied to your HTML
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论