圆形输入文本框，但出现方形选择框[重复]答案

【问题标题】：Rounded input text box, but square selection box appears [duplicate]圆形输入文本框，但出现方形选择框[重复]
【发布时间】：2021-03-02 06:15:30
【问题描述】：

text input selection(.gif)

我让一个文本输入框有圆角，但是当我选择它输入时，一个方形选择框围绕它。

如何使选择框也具有圆角？或者有没有办法禁用出现的方形选择框？

感谢您的帮助。

【问题讨论】：

能否请您输入制作文本框的代码？
这能回答你的问题吗？ How to remove the border highlight on an input text element
好的，谢谢。我找不到与该主题相关的论坛主题，因为我使用了错误的关键字来查找它们。

标签： html css

【解决方案1】：

显示的是大纲。 outline 是一个 CSS 属性。它出现在焦点所在的元素上（例如正在输入的input）。如果您愿意，您可以将其删除，但确保使用 border、box-shadow 或其他内容（当它获得焦点时）。添加焦点指示器对于 Web 可访问性很重要。以下是正在发生的事情和可能的解决方案的示例：

input {
border-radius: 10px;
}

#input2 {
  outline: none;
}

#input2:focus {
  border: 2px solid blue;
}

<input id="input1">
<br><br>
<input id="input2">

这会将border 替换为outline。它仍然可以访问，但 border 尊重 border-radius。

【讨论】：

感谢您的帮助，您对“边框，框阴影”的评论是一个好点。刚开始学习，还不知道焦点指示器，谢谢指点。

【解决方案2】：

试试这个：

input {
  border-radius: 5px;
 }
input:focus {
  outline-width: 0;
 }

&lt;input&gt;

正如@AlexH 指出的那样，您还可以向input: focus 添加其他内容以使其更易于访问。

例子：

input{
  border-radius: 5px;
  outline: none;
}

input:focus{
  border: 2px solid red;
  border-radius: 10px;
}

&lt;input&gt;

清理干净：

您可以使用@keyframes 获得更好的过渡效果，并且过渡效果持续时间更长，可能是更有效的可访问性工具（根据我的经验）

input{
  border-radius: 5px;
  border: 1px solid black;
}

input:focus{
  animation: input 0.5s forwards;
  border-radius: 7px;
  border: 2px solid #55555;
  outline: none;
}

@keyframes input{
  from{
    border-radius: 5px;
    border: 1px solid black;
  }
  to{
    border-radius: 9px;
    border: 1px solid #555555;
  }
}

&lt;input&gt;

【讨论】：

删除outline而不添加焦点指示器不利于可访问性。
@AlexH 你是什么意思。它回答了这个问题。这是来自here 的确切答案
使用 Tab 键导航页面的人（可能是因为视力障碍）不会知道他们在哪里。他们在浏览页面时会遇到困难，并且可能会迷路。
@AlexH 是的，您还可以添加许多其他内容。我所做的只是回答问题
没错。但重要的是要指出这样的事情，这样 OP 就不会在不知不觉中犯错。这就是答案和好答案之间的区别——答案解决了问题，而好的答案解决了问题。问题和问题之间的区别很重要。