标签: outline

在Actionscript 3.0中设置文本大纲/边框

如何为AS3中的一行文本中的每个字符设置文本大纲/边框的属性？

text actionscript actionscript-3 outline

fin*_*vin

lucky-day

5
推荐指数

1
解决办法

9900
查看次数

Chrome默认焦点大纲

我正在尝试删除默认焦点froom chrome,它适用于outline:none; 同时我想添加一个box-shadow但它不适用于select.

*:focus { outline:none; }

input[type="text"]:focus,input[type="checkbox"]:focus,input[type="password"]:focus,
select:focus, textarea:focus,option:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 9px 0 #86AECC;
z-index:1;
}

Run Code Online (Sandbox Code Playgroud)

小提琴:http://jsfiddle.net/DCjYA/309/

google-chrome focus outline

Bur*_*ler

lucky-day

5
推荐指数

1
解决办法

1万
查看次数

从三星galaxy s2中的聚焦元素中去除橙色轮廓

有没有办法关闭三星Galaxy s2中移动浏览器使用的高亮效果？

我已经尝试过:

-webkit-tap-highlight-color:rgba(0,0,0,0)
-webkit-tap-highlight-color:transparent
-webkit-touch-callout: none;
outline:none;

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

Run Code Online (Sandbox Code Playgroud)

或者 - 有人可以准确地解释这些效果显示的时候吗我可以检测屏幕触摸启动并以不触发这些效果的方式触摸吗？

谢谢

html css outline samsung-mobile

epe*_*leg

lucky-day

5
推荐指数

1
解决办法

4876
查看次数

为什么概述:没有被认为是良好的做法？

谢谢大家.这是一个非常好的讨论,并为我澄清了很多.

我正在研究输入字段并希望删除大纲,但人们说这是一个不好的做法.我不明白为什么.毕竟,不同的浏览器有不同的轮廓,这消除了一致性.

没有大纲:

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
  color: #000 !important;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  padding: 7px 13px; 
}
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus,
  form textarea:focus {
  outline: none; }

Run Code Online (Sandbox Code Playgroud)

我的想法是,为了增加一致性,最好摆脱大纲,但我想有些人会争论可访问性.我仍然可以为可访问性添加边框或框阴影,这有助于网站在所有浏览器中看起来统一:

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
  color: #000 !important;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  padding: 7px 13px; 
}
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus,
  form textarea:focus {
  /* IMPORTANT */ box-shadow: 0px 0px 2pt 2pt #008bd1;
  outline: none; …

Run Code Online (Sandbox Code Playgroud)

html css accessibility css3 outline

Sha*_*ngh

2013 10-20

5
推荐指数

2
解决办法

1420
查看次数

单击时隐藏轮廓焦点链接

当我点击链接时,我需要隐藏焦点轮廓.但是当我用tabindex滑动链接时,我还需要显示它.有些网站使用任何特定的解决方法来执行此操作.这似乎是dafault行为.但在我的网站上,当我点击一个链接时,它也显示了大纲.只有当我使用tabindex键滑动链接时,我才能显示他的轮廓？提前致谢.赫尔穆特

css focus hyperlink outline tabindex

Hel*_*l00

lucky-day

5
推荐指数

1
解决办法

1444
查看次数

在Firefox链接中无法摆脱虚线轮廓？

我有一个充满imgs的列表:

<ul>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
(...)
</ul>

Run Code Online (Sandbox Code Playgroud)

当我在Firefox中点击它们时,会出现虚线轮廓(赫克发明了这个以及为什么这么丑陋!).

我想摆脱它们,但风格"轮廓"等似乎不起作用,我尝试了下面的所有选项:

#ul li img:active {
    -moz-outline-style: none;
    -moz-focus-inner-border: 0; 
    outline: none;
    outline-style: none;
}     

#ul li img:focus {
    -moz-outline-style: none;
    -moz-focus-inner-border: 0; 
    outline: none;
    outline-style: none;
}

 #ul li img a:active {
        -moz-outline-style: none;
        -moz-focus-inner-border: 0; 
        outline: none;
        outline-style: none;
    }     

    #ul li img a:focus {
        -moz-outline-style: none;
        -moz-focus-inner-border: 0; 
        outline: none;
        outline-style: none;
    }

Run Code Online (Sandbox Code Playgroud)

css firefox outline dotted-line

fom*_*icz

2010 09-14

4
推荐指数

2
解决办法

6374
查看次数

使用CSS，如何创建“厚于” 1px的文本笔划轮廓？

下面是我用来做1px的Text Stroke轮廓的代码。但是，如何使轮廓变粗呢？如果仅将所有“ 1px”替换为“ 5px”，结果看起来很疯狂。

的HTML

<div class="element">
Hello!
</div>

Run Code Online (Sandbox Code Playgroud)

的CSS

.element {
color:white;

    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

Run Code Online (Sandbox Code Playgroud)

css outline stroke

mat*_*hew

lucky-day

4
推荐指数

1
解决办法

1396
查看次数

CSS盒子阴影与轮廓

我一直没能找到一个重复的，你可以找到一堆的博客文章，其建议使用box-shadow的元素的焦点状态，而不是outline因为它是在造型方面更灵活，它也遵循border-radius你不像造型元素outline，其始终保持矩形。

是它认为一个很好的做法，以取代outline用box-shadow？是否有这样做的警告？

css accessibility outline box-shadow

Ant*_*ntK

2018 12-05

4
推荐指数

2
解决办法

1702
查看次数

应用于包含图像的锚点的轮廓在 Chrome 中的高度不正确

对于我正在处理的网站，我希望在链接聚焦/悬停/活动时在链接周围出现虚线轮廓。我希望文本和图像链接发生这种情况。

我遇到的问题是，虽然我的代码在 Firefox 和 IE 中运行良好，但在 Chrome 7.0.517.41 中，虚线轮廓与我的文本高度相同，而不是图像的高度。

示例代码：

<!DOCTYPE html> 
<html lang="en"> 
    <head>
        <style type="text/css">
            BODY { font: 15px/1.5 sans-serif; }
            a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
        </style>
    </head>
    <body>
        <a href="#">
            <img src="http://sstatic.net/stackoverflow/Img/wmd-buttons.png" />
        </a>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这很烦人。作为一种解决方法，我使用 javascript 应用一个类来区分包含图像的锚点，并确保将包含图像的锚点的轮廓应用于锚点，而不是图像：

a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
a:focus.img, a:hover.img, a:active.img { outline: none; }
a:focus img, a:hover img, a:active img { outline: 1px dotted #11aa22; }

Run Code Online (Sandbox Code Playgroud)

在我准备好的文件中