删除选择CSS上的黑色方块

编辑：

我发现这个方块实际上是滚动条的一部分，通过放置：

select::-webkit-scrollbar {
    display: none;
}

它没有出现

我有一个选择。当我没有专注于它时，它看起来很正常：

然而，当我专注于它时，左上角的这个奇怪的黑色正方形出现了：

有没有关于如何解决这个问题的建议

以下是我的代码（如果有帮助）：

<style>
html {
  background-color: dodgerblue;
  text-align: center;
}

select {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: white;
  font-family: inherit;
  outline: none;
  padding-bottom: 100px;
  padding-top: 100px;
  width: 150px;
}

select option {
  padding: 10px;
}
</style>
<select size="2">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

html{
背景色：淡蓝色；
文本对齐：居中；
}
挑选{
背景色：透明；
边框：1px实心#ffffff；
颜色：白色；
字体家族：继承；
大纲：无；
填充底部：100px；
填充顶部：100px；
宽度：150px；
}
选择选项{
填充：10px；
}
选择1
选择2

---

谢谢。

将以下内容设置到您的方框中

outline: none !important;

---

您的选择代码是干净的

应该是html中的某些内容导致了它。它可以是其他css或javascript

您可以使用一些clearfix类包装您的select元素，使其干净，但您必须检查html以搜索问题

html{
背景色：淡蓝色；
文本对齐：居中；
}
挑选{
背景色：透明；
边框：1px实心#ffffff；
颜色：白色；
字体家族：继承；
大纲：无；
填充底部：100px；
填充顶部：100px；
宽度：150px；
}
选择选项{
填充：10px；
}
.clearfix:以前{
内容：“；
显示：表格；
}
.clearfix:之后{
明确：两者皆有；
}

选择1
选择2

将这些添加到元素中

  -webkit-transition: none !important;
              -o-transition: none !important;
                 transition: none !important;

---

将

input:focus{outline:none；}

添加到任何元素中is@dustytrash尝试过之后，仍然显示黑色方块…尝试将

select

更改为

select，select:focus

，并添加

*focus{outline:none；}

@Juniorized确保浏览器未获得缓存版本。否则，您将不得不发布您的HTML以获得answers@dustytrash是的，它不是缓存版本，是本地文件，我已经发布了我的HTML，并且自从我开始使用以来，我的框中没有大纲。@Juniorized您使用的浏览器是什么？我无法在chrome/FF/I上重现此问题。这对我很有帮助，谢谢+1