CSS轮廓宽度不起作用 [英] CSS outline width not working

问题描述

我正在尝试将输入元素的轮廓宽度设置为焦点.不管我的设置如何，轮廓宽度都保持不变(就像默认设置一样，无法更改).

解决方案

在您的CSS中添加 outline-style:solid .

由于 outline-style 属性的默认样式为 none ，因此您也必须进行设置( none |隐藏|点线|虚线|实线|凹槽|凸脊|插入|起始|继承).您可以为样式使用的最佳价值是 solid ，但这是优先选择的问题.

行为示例:

  input {font-size:22px;填充:5px 3px;颜色:#666;}input.with-outline-style:focus {轮廓宽度:3px；轮廓样式:实心；轮廓颜色:#725b44;/*您也可以使用速记:*//*轮廓:3px实心#666；*//*宽度样式颜色*/}input.without-outline-style:focus {轮廓宽度:3px；轮廓颜色:#725b44;}身体 {背景颜色:#fd9;}div {内边距:5px 10px;}  

 < div>< input type ="text" class ="with-outline-style" value ="outline-style设置为实心"/></div>< div><输入type ="text" class ="without-outline-style" value =未设置outline-style"/></div>  

更新

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

I am trying to set outline width of the input element on focus. Outline width stays the same (like it is default setting which can not be changed), no matter of my setting.

Here is example from code pen

And here is part from css where I am trying to set outline-width on focus:

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

EDIT:

I've just forgotten to include line style (solid, dotted...). Now it works. One thing is still strange to me. Why is outline inside element? Isnt' the outline defined as 'a line that is drawn around elements (outside the borders) to make the element "stand out".'

Here from my example outline looks like this. I thought it's going to be around element, but it's inside:

解决方案

Add outline-style: solid to your css.

Since the default style for the outline-style property is none, you will have to set it as well (none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit). Best value you can use for the style is solid, but that's a matter of preference.

Example for the behavior:

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>

Update

The outline-width setting doesn't work without specifying outline-style: if no outline style is set, the browser will render the outline in its default style (which could be anything, such as a dotted rectangle in IE, a shaded rectangle in Chrome, or even nothing).

这篇关于CSS轮廓宽度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！