如何在选定时更改元素的边框

How to change the border of an element when selected?

本文关键字：元素 边框 定时      更新时间：2023-09-26

我有一个查询，并试图做一些研究，但我甚至试图谷歌我正在寻找什么以及如何措辞都遇到了麻烦。目前，每个div 都有一个标签，然后是一个输入字段。我已经使所有这些输入字段都带有圆角边缘。我的问题是当我单击所选区域时，边缘周围会出现一个矩形边框。图片可以在这里查看：http://www.tiikoni.com/tis/view/?id=6128132

如何更改此边框的外观？

这是我的 css 代码：

    div input{
     border: 2px solid #a1a1a1;
        padding: 10px 40px; 
        background: #dddddd;
        width: 300px;
        border-radius: 25px;
    }

这是我的 html 的一部分：

<div class="fourth">
        <label> Confirm Password: </label>
        <input type="text" name="cPassword" class="iBox"  id="cPassword" onkeyup="passwordValidation()" placeholder="confirm it!" autocomplete="off">
        <p id="combination"></p>
    </div>

一种解决方案是使用以下方法删除焦点上的默认轮廓：

div input:focus{
    outline: none;
}


   div input {
     border: 2px solid #a1a1a1;
     padding: 10px 40px;
     background: #dddddd;
     width: 300px;
     border-radius: 25px;
   }
   div input:focus {
     outline: none;
   }
<div class="fourth">
  <label>Confirm Password:</label>
  <input type="text" name="cPassword" class="iBox" id="cPassword" onkeyup="passwordValidation()" placeholder="confirm it!" autocomplete="off" />
  <p id="combination"></p>
</div>

它不是边框，而是轮廓，因此您可以使用 outline 属性设置其样式。但事情取决于它应该如何改变。删除它，改变它的颜色很容易等;但是设置圆角不是（你只能假装它），请参阅轮廓半径？

简单地删除轮廓不利于可用性和可访问性，因为轮廓"焦点矩形"向用户显示焦点我们在哪里。您可以考虑通过使用其他方法来指示焦点来补偿这一点。一种简单的可能性是更改边框颜色或样式或两者。因此，当聚焦时，元素不会获得轮廓，但其边框会发生变化，使其类似于焦点矩形。下面说明了这些技术，并使重点相当明显;调整以适合您的整体设计：

  div input{
     border: 2px solid #a1a1a1;
        padding: 10px 40px; 
        background: #dddddd;
        width: 300px;
        border-radius: 25px;
     }
  div input:focus {
        outline: none;
        border-color: red;
        background: #ffd;
     }
<div class="fourth">
        <label for="cPassword"> Confirm Password: </label>
        <input type="text" name="cPassword" class="iBox"  id="cPassword" onkeyup="passwordValidation()" placeholder="confirm it!" autocomplete="off">
        <p id="combination"></p>
</div>

这是

outline属性，可以像border一样设置，它通常被分配给合适元素的:focus状态，也可以设置为none

更多关于 MDN outline的信息

CSS 大纲属性是用于设置一个或 更多单独的轮廓属性轮廓样式、轮廓宽度 和单个声明中的轮廓颜色。在大多数情况下使用 此快捷方式更可取且更方便。

更多关于MDN :focus的信息

当元素收到时应用 :focus CSS 伪类 焦点，来自用户使用键盘选择它或 通过鼠标激活（例如表单输入）。

同样有趣的是，通过将 tabindex 属性添加到元素（例如 div ），您还可以启用:focus状态的样式。

 div input {
   border: 2px solid #a1a1a1;
   padding: 10px 40px;
   background: #dddddd;
   width: 300px;
   border-radius: 25px;
 }
 input:focus {
   outline: none;
   border-color:red;
 }
<div class="fourth">
  <label>Confirm Password:</label>
  <input type="text" name="cPassword" class="iBox" id="cPassword" onkeyup="passwordValidation()" placeholder="confirm it!" autocomplete="off" />
  <p id="combination"></p>
</div>

相关文章：