Question

是否可以删除选择元素中所选项目周围的虚线？

alt text

我试图在CSS中添加outline属性，但它不起作用，至少不在FF中。

<style>
   select { outline:none; }
</style>

更新
在您继续删除大纲之前，请阅读此内容 http://www.outlinenone.com/

Answer 1

嗯，Duopixel’s answer很简单。如果我们更进一步，我们可以使它具有防弹性。

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

你去了，只对Firefox有效，所选选项周围的丑陋虚线轮廓消失了。

Answer 2

我找到了一个解决方案，但它是所有黑客的母亲，希望它可以作为其他更强大的解决方案的起点。缺点（我认为太大）是任何不支持text-shadow但支持rgba（IE 9）的浏览器都不会呈现文本，除非你使用像Modernizr这样的库（不是测试，只是一个理论）。

Firefox使用文本颜色来确定虚线边框的颜色。所以说如果你这样做......

select {
  color: rgba(0,0,0,0);
}

Firefox会将虚线边框渲染为透明。但是你的文字当然也是透明的！所以我们必须以某种方式显示文本。 text-shadow来救援：

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

我们放置了没有偏移且没有模糊的文本阴影，因此替换了文本。当然，较旧的浏览器对此没有任何了解，因此我们必须提供颜色的后备：

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

这是IE9发挥作用的时候：它支持rgba但不支持文本阴影，所以你会得到一个看似空的选择框。通过text-shadow检测获取您的Modernizr版本并执行...

.no-textshadow select {
  color: #000;
}

享受。

Answer 3

以下是与Firefox选择框修复样式问题的解决方案的合作。使用此CSS选择器作为常规CSS重置的一部分。

类根据问题删除大纲，但也删除任何背景图像（因为我通常使用自定义下拉箭头，当前无法删除Firefoxes系统下拉箭头）。如果将背景图片用于下拉图片以外的任何内容，只需删除第background-image: none !important;行

即可

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Answer 4

通常，表单控件不可能达到这种准确度。没有我知道的浏览器支持所有控件中的合理范围的属性。这就是为什么有大量的JavaScript库使用图像和其他HTML元素“伪造”表单控件并使用代码模拟其原始功能的原因：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

Answer 5

这将针对所有firefox版本

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

如果您计划在网站上使用相同样式表的其他网页上显示大纲，则可能需要删除！important。

Answer 6

<select onchange="this.blur();">

如果使用此选项，边框会保持不变，直到您从列表中选择一个项目。

Answer 7

尝试以下方法之一：

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Reference

Answer 8

解决方案

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Answer 9

从Firefox所有可选标签中删除轮廓/虚线边框。

将这行代码放在样式表中：

*:focus{outline:none !important;}

Answer 10

在CSS中为您选择的内容添加边框样式：无。

select {
border-style: none; }

Answer 11

第1步）添加HTML：添加您选择的选择选项并添加属性：contenteditable =“ true”

第2步）添加CSS：使用[attribute]选择器选择所有可编辑的元素，并使用outline属性删除边框：

[contenteditable] {
  outline: 0px solid transparent;
}
select {
  border: none;
}

<select contenteditable="true">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Answer 12

select:focus {
  box-shadow: none;
}

在选中/聚焦时移除选择框的轮廓。

Answer 13

https://ssiddique.info/projects/jqueryplugins/demo/index.php?demo=CheckboxStylized 看看这个从 here

下载插件

Answer 14

这将从select元素和大纲中移除焦点：

$("select").click(function(){
    $(this).blur();
});

虽然这并没有其他浏览器的缺点。您将要检查用户正在使用的浏览器：

if (FIREFOX) {
    //implement the code
}

Answer 15

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

100％工作

从FF中的选择框中删除轮廓

15 个答案: