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

Posted 2023-02-22

【中文标题】圆形输入文本框，但出现方形选择框[重复]

【英文标题】：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

好的，谢谢。我找不到与该主题相关的论坛主题，因为我使用了错误的关键字来查找它们。

【参考方案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;
 

<input>

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

例子：

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


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

<input>

清理干净：

您可以使用@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;
  

<input>

【讨论】：

删除outline而不添加焦点指示器不利于可访问性。

@AlexH 你是什么意思。它回答了这个问题。这是来自here

的确切答案

使用 Tab 键导航页面的人（可能是因为视力障碍）不会知道他们在哪里。他们在浏览页面时会遇到困难，并且可能会迷路。

@AlexH 是的，您还可以添加许多其他内容。我所做的只是回答问题

没错。但重要的是要指出这样的事情，这样 OP 就不会在不知不觉中犯错。这就是答案和好答案之间的区别——答案解决了问题，而好的答案解决了问题。问题和问题之间的区别很重要。