Question

我有一个查询，并尝试做一些研究，但我甚至有困难，甚至尝试谷歌我正在寻找什么以及如何说出来。目前每个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>

Answer 1

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

div input:focus{
    outline: none;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

More on outline from MDN

CSS outline属性是设置一个或的简写属性更多的个别轮廓属性轮廓样式，轮廓宽度和单一声明中的轮廓颜色。在大多数情况下使用这种捷径更可取，也更方便。

More on :focus from MDN

在收到元素时应用: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>

Answer 3

它不是边框而是大纲，因此您可以使用outline属性设置样式。但事情取决于应该如何改变。去除它，改变它的颜色等容易;但是设置圆角不是（你只能伪造它），请参阅Outline radius?

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

  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>

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

3 个答案: