CSS轮廓宽度不起作用答案

【问题标题】：CSS outline width not workingCSS轮廓宽度不起作用
【发布时间】：2016-12-16 22:01:09
【问题描述】：

我正在尝试将输入元素的轮廓宽度设置为焦点。无论我的设置如何，轮廓宽度都保持不变（就像它是无法更改的默认设置一样）。

这是我试图在焦点上设置轮廓宽度的 css 的一部分：

input:focus {
  outline-width: 0.1px;
  outline-color: #725b44;  
}

编辑：

我刚刚忘记包含线条样式（实线、虚线...）。现在它起作用了。有一件事对我来说仍然很奇怪。为什么轮廓在元素内？ '轮廓是否定义为'围绕元素（边界外）绘制的线以使元素“突出”。'

从我的示例大纲看起来像这样。我以为它会在元素周围，但它在里面：

【问题讨论】：

0.1px 究竟会是什么样子？大多数浏览器要么不显示它，要么将其四舍五入到 1px。
如果我想要 3px 怎么办？如果我设置为 3px，它就不起作用。宽度保持不变。
使用outline:1px solid #725b44;
如果我输入 outline-width: 3px; 对我有用而且，更容易使用这种语法：outline: 9px solid blue;

标签： html css css-selectors css-position pseudo-element

【解决方案1】：

您应该添加1px 而不是0.1px 和outline-style

input:focus {
  outline:1px solid #725b44;  
}

【讨论】：

【解决方案2】：

使用outline-style

input:focus {
  outline-width: 0.1px;
  outline-color: #725b44;  
  outline-style: dotted;
}

【讨论】：

【解决方案3】：

试试

outline: 3px solid #725b44;

或

outline-width:3px;
outline-color:#725b44;
outline-style:solid;

.divMain {
  height: 100vh;
  width: 100vw;
  border: 0px solid black;
}
.divLogin {
  position: absolute;
  left: 20%;
  top: 5%;
  width: 300px;
  height: 600px;
  border: 1px solid #CF6B08;
  border-radius: 3px;
}
#divLogin {
  background: #FFCC99;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#FAC28A, #FFCC99);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#FAC28A, #FFCC99);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#FAC28A, #FFCC99);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#FAC28A, #FFCC99);
  /* Standard syntax */
}
.spanTitle {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 20px;
  color: #003399;
  font-weight: bold;
}
.inputFirst {
  position: absolute;
  top: 50px;
  margin-left: 5px;
  width: calc(100% - 10px);
  height: 30px;
}
.divWarningInputFirst {
  position: absolute;
  width: calc(100% - 10px);
  height: 30px;
  top: 88px;
  margin-left: 5px;
  border: 0px solid black;
  background-color: #fcdcbb;
  color: #ff0000;
  font-weight: bold;
  padding-top: 5px;
  padding-left: 5px;
}
.divWarningInputFirst:after {
  content: "";
  position: absolute;
  top: -5px;
  left: 8px;
  border-style: solid;
  border-width: 0 5px 6px;
  border-color: #fcdcbb transparent;
  display: block;
  width: 0;
  z-index: 1;
}
input:focus {
  outline: 3px solid #725b44;

}
input {
  border-color: transparent;
  padding-left: 3px;
  box-sizing: border-box;
}

<div id="divMain" class="divMain">
  
  <div id="divLogin" class="divLogin">
    
    <span id="spanTitle" class="spanTitle">Login</span>
    
    <input type="text" id="inputFirst" class="inputFirst" placeholder="input first">
    
    
    
    <div id="divWarningInputFirst" class="divWarningInputFirst">Please enter input first</div>
    
  </div>
  
  
  
</div>

这可能对你有帮助！

【讨论】：

【解决方案4】：

将outline-style: solid 添加到您的CSS。

行为示例：

input {
  font-size: 22px;
  padding: 5px 3px;
  color: #666;
}

input.with-outline-style:focus {
  outline-width: 3px;
  outline-style: solid;
  outline-color: #725b44;
  /* You could also use the shorthand: */
  /* outline: 3px solid #666; */
  /*       width style color */
}

input.without-outline-style:focus {
  outline-width: 3px;
  outline-color: #725b44;
}

body {
  background-color: #fd9;
}

div {
  padding: 5px 10px;
}

<div>
  <input type="text" class="with-outline-style" value="outline-style set to solid" />
</div>

<div>
  <input type="text" class="without-outline-style" value="outline-style not set" />
</div>

更新

如果不指定outline-style，outline-width 设置将不起作用：如果未设置轮廓样式，浏览器将以其默认样式呈现轮廓（可以是任何东西，例如 IE 中的虚线矩形、 Chrome 中的阴影矩形，甚至什么都没有）。

【讨论】：

为什么outline-width不指定大纲样式就不行？
因为默认的大纲样式是none。如果您不指定样式，浏览器将以其默认样式呈现轮廓（可以是任何东西，例如 IE 中的虚线矩形，Chrome 中的阴影矩形，甚至什么都没有）。

【解决方案5】：

只有指定outline-style，outline-width才会生效。请检查并让我知道您的反馈。谢谢！

sn-p 下面：

.divMain {
  height: 100vh;
  width: 100vw;
  border: 0px solid black;
}
.divLogin {
  position: absolute;
  left: 20%;
  top: 5%;
  width: 300px;
  height: 600px;
  border: 1px solid #CF6B08;
  border-radius: 3px;
}
#divLogin {
  background: #FFCC99;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#FAC28A, #FFCC99);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#FAC28A, #FFCC99);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#FAC28A, #FFCC99);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#FAC28A, #FFCC99);
  /* Standard syntax */
}
.spanTitle {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 20px;
  color: #003399;
  font-weight: bold;
}
.inputFirst {
  position: absolute;
  top: 50px;
  margin-left: 5px;
  width: calc(100% - 10px);
  height: 30px;
}
.divWarningInputFirst {
  position: absolute;
  width: calc(100% - 10px);
  height: 30px;
  top: 88px;
  margin-left: 5px;
  border: 0px solid black;
  background-color: #fcdcbb;
  color: #ff0000;
  font-weight: bold;
  padding-top: 5px;
  padding-left: 5px;
}
.divWarningInputFirst:after {
  content: "";
  position: absolute;
  top: -5px;
  left: 8px;
  border-style: solid;
  border-width: 0 5px 6px;
  border-color: #fcdcbb transparent;
  display: block;
  width: 0;
  z-index: 1;
}
input:focus {
  outline-width: 3px;
  outline-style: solid;
  outline-color: #725b44;
}
input {
  border-color: transparent;
  padding-left: 3px;
  box-sizing: border-box;
}

<div id="divMain" class="divMain">

  <div id="divLogin" class="divLogin">

    <span id="spanTitle" class="spanTitle">Login</span>

    <input type="text" id="inputFirst" class="inputFirst" placeholder="input first">



    <div id="divWarningInputFirst" class="divWarningInputFirst">Please enter input first</div>

  </div>



</div>

【讨论】：