如何在单击时切换元素的边框属性，而不取代其他元素？

Question

我正在尝试构建一个页面，人们可以在其中 select 产品的颜色和容量。在给定时间只能有一个 colour/capacity 处于活动状态，当一个 select 处于活动状态时，需要在其周围出现一个边框。

您可以在下面的尝试中看到应用边框时其他元素被置换的问题。

我考虑过提供所有元素 border: 2px solid rgba(0,0,0,0) 来解决置换问题，然后使用 javascript 更改单击时的边框属性，但我认为这可能不是一个优雅的解决方案。

这是 HTML...

<ul>
    <li onclick="changeName('Gold')"><div class="select-colour" id="gold"></div></li>
    <li onclick="changeName('Silver')"><div class="select-colour" id="silver"></div></li>
    <li onclick="changeName('Space Grey'); "><div class="select-colour" id="space-grey"></div></li>
</ul>

和 CSS...

ul li {
          width: 47px;
          height: 47px;
          border-radius: 12px;
          border: 2px solid rgba(0,0,0,0);
          padding: 3px;
       }

.select-colour {
          width: 45px;
          height: 45px;
          border-radius: 8px;
          border: 1px solid #c2bebb;
          -webkit-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
          -moz-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
          box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
        }

#gold {
          background-color: #f5e7dc;
      }

#silver {
          background-color: #e2e2e2;
        }

#space-grey {
          background-color: #232323;
            }

有没有人知道解决这个问题的最佳方法？谢谢。

Answer 1

将 box-sizing: border-box 添加到 ul li 选择器，如下所示：

ul li {
      width: 47px;
      height: 47px;
      border-radius: 12px;
      border: 2px solid rgba(0,0,0,0);
      padding: 3px;
      box-sizing: border-box;
   }

框大小：border-box 使元素总数 width/height 包括边框和半径。

编辑：

两个文档链接： https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

使用 box-sizing: border-box; 这是 MDN 的 link，您可以在其中找到更多详细信息 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 3

如果 div 未被选中，则保持 border-color: 透明，并在选中时更改边框颜色。顺便说一句，你也可以给它添加一个过渡。

Answer 4

<style>
        input[type="checkbox"]:checked  ~ #hello{
            box-shadow: 0 0 0 3px hotpink;
        }
        #hello{
            width: 50px;
            margin: 20px;
        }
</style>

<input id="check" type="checkbox">
<label id="hello" for="check">Hello</label>

这就是你想要的隐藏复选框

Answer 5

这是使用单选按钮和标签的 CSS 唯一解决方案。希望这有帮助。

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  padding-top: 30px;
}

label {
  color: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

input:checked+label {
  color: black;
}

input[type="radio"] {
  display: none;
}

#gold+label:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: gold;
  position: absolute;
  border-radius: 5px;
  top: 30px;
  left: 0;
}

#gold:checked+label:after, #silver:checked+label:after, #bronze:checked+label:after {
  border: 2px solid red;
}

#silver+label:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: silver;
  position: absolute;
  border-radius: 5px;
  top: 30px;
  left: 40px;
}

#bronze+label:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: sandybrown;
  position: absolute;
  border-radius: 5px;
  top: 30px;
  left: 80px;
}

<div class="container colors">
  <form name="colors">
    <input type="radio" id="gold" name="color" />
    <label for="gold">Gold</label>
    <input type="radio" id="silver" name="color" />
    <label for="silver">Silver</label>
    <input type="radio" id="bronze" name="color" />
    <label for="bronze">Bronze</label>
  </form>
</div>

如何在单击时切换元素的边框属性，而不取代其他元素？

How can I toggle the border property of an element on click, without it displacing other elements?

html

javascript

css

position

border

如何在单击时切换元素的边框 属性，而不取代其他元素？

How can I toggle the border property of an element on click, without it displacing other elements?

html

javascript

css

position

border

如何在单击时切换元素的边框属性，而不取代其他元素？