代码之家  ›  专栏  ›  技术社区  ›  chuckd

在Chrome中找不到聚焦/单击按钮的CSS[重复]

  •  0
  • chuckd  · 技术社区  · 7 年前

    我把边界半径设为50%,使其变圆。 如何设置按钮周围的焦点突出显示为圆形或根本不显示?

    我似乎在Chrome Begger中找不到:focus或:clicked css。

    enter image description here

    这是HTML

    <button id="frontSave" type="button" class="btn btn-lg"><i id="cameraIconFront" class="fal fa-camera fa-2x"></i></button>
    
    1 回复  |  直到 7 年前
        1
  •  3
  •   Chris W.    7 年前

    您只需重写用户代理样式表并替换默认的 outline 用一个 border

    干杯

    body {text-align:center}
    
    button {
      border-radius: 50%;
      margin: 2rem;
      padding: 2rem;
      border: transparent 3px solid;
    }
    
    button:focus {
      outline: none;
      border: red 3px dotted;
    }   
    <button>FOCUS<br/>TEST</button>