专注于输入时的大纲答案

【问题标题】：Put Outline When Focus on Input专注于输入时的大纲
【发布时间】：2021-10-25 11:54:30
【问题描述】：

如何在具有边框半径的输入上添加轮廓？请在这里检查我的代码框 CLICK HERE

.code-inputs input:focus {
  outline: solid;
  border-radius: 10px;
}

【问题讨论】：

你不能:) 你应该试试别的，比如 box-shadow

标签： css reactjs react-hooks

【解决方案1】：

.code-inputs input {
  border: none;
  background-image: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-align: center;
  height: 60px;
  width: 40px;
  border-radius: 10px;
  margin: 0 4px;
  border: 2px solid #4f5b66;
  font-size: 38px;
}
.code-inputs input:focus {
  outline: 5px solid purple;
  border-radius: 10px;
  border: 2px solid transparent;
}

<div class="code-inputs">
  <input type="text" />
</div>

沿着样式（实心），您可以将宽度和颜色设置为轮廓。你试过outline: 5px solid purple; 吗？

【讨论】：

它上面的空间仍然很小。

【解决方案2】：

用box-shadow: 0 0 0 3px;代替outline: solid;

【讨论】：

【解决方案3】：

用 box-shadow 替换轮廓

.code-inputs input:focus {
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 5px rgba(0, 123, 255, .5);
}

【讨论】：

【解决方案4】：

为此，您将使用阴影：

更改：

.code-inputs input:focus {
  outline: solid;
  border-radius: 10px;
}

收件人

.code-inputs input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, .5);
}

示例：

    input, input:focus {
        border: none;
        border-radius: 2pt;
        box-shadow: 0 0 0 1pt grey;
        outline: none;
        transition: .1s;
    }
    .text:focus {
        box-shadow: 0 0 0 2pt red;
    }

    &lt;input type=text class="text"&gt;

【讨论】：

【解决方案5】：

您可以通过使用box-shadow 而不是轮廓来进行这种作弊 - 我过去在使用圆形输入框时也遇到过同样的问题。可能不是最好的解决方案，但绝对可以。

input {
  border-radius: 10px;
  height:30px;
  border: none;
  outline:none;
  box-shadow: 0 0 0 2px #4f5b66;
}
input:focus {
  border-color:transparent;
  border:none;
  box-shadow: 0 0 0 2px red;
}

&lt;input type="text" /&gt;

JSFiddle

【讨论】：

【解决方案6】：

你不能用轮廓来做到这一点，就像轮廓框阴影不会导致元素改变大小一样，所以你可以在焦点上应用像边框这样的轮廓。

.code-inputs input {
  outline: none;
}
.code-inputs input:focus {
   box-shadow: purple 0 0 5px;
}

我删除了多余的东西，但请随意使用它。再次使用 box-shadow 的原因是，应用时它不会改变元素的大小，因此不会在页面上重排。

【讨论】：