Question

我正在尝试构建一个人们可以选择产品颜色和容量的页面。在给定时间只能激活一种颜色/容量，当选择一种颜色/容量时，需要在其周围出现边框。

您可以在我的尝试中看到在应用边框时其他元素被移位的问题。

我考虑过让所有元素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使元素的总宽度/高度包括边框和半径。

编辑：

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

Answer 2

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

如果未选择div，只需保持border-color：透明，并在选择时更改边框的颜色。顺便说一下，您也可以添加一个转换。

Answer 5

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

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

如何在单击时切换元素的border属性，而不替换其他元素？

5 个答案: