Question

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

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

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

修改

我忘了包括线条样式（实线，点缀......）。现在它有效。有一件事对我来说仍然很奇怪。为什么在元素内部轮廓？ Isnt'将轮廓定义为'围绕元素（边框外）绘制的线，以使元素“脱颖而出”。'

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

Answer 1

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

行为示例：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用outline-style

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

Answer 3

尝试

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>

ignore_code = """
        'E101','E111','E112','E113','E114','E115',
        'E116','E121','E122','E123','E124','E125',
        """.replace("\n",' ')

if flake8.main.check_file(fileName,ignore=tuple(ignore_code),complexity=-1):
    return False
else:
    return True

这可能对你有帮助！

Answer 4

仅当您指定outline-style时，outline-width才会生效。请检查并告诉我您的反馈。谢谢！

以下片段：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 5

您应该使用@JsonCreator public static SomeEnum fromString(JsonNode json) { return SomeEnum.valueOf(json.get("code").asText()); }

添加1px而不是0.1px

outline-style

CSS轮廓宽度不起作用

5 个答案: