Question

我正在使用WordPress为我的网站创建页面。我有CustomCSS插件，但似乎没有完全正常工作。

我希望选中时，我的单选按钮周围的边框。

我创建了一个HTML / CSS游乐场，看看我的CSS或WordPress是否存在问题，并且它出现了WordPress的问题。操场上显示了我想要的东西。

如果将完全相同的代码复制到CustomCSS插件和WordPress HTML页面中，如何使用WordPress？

游乐场：

.row{
    font-size: 0px; 
    min-height:50px;
    margin-top:25px;
    margin-bottom:100px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding:2%;
}

.third-row{
    display:inline-block;
    width:25%;
    margin:4%;
    height:25px;
}

.input-hidden {
  position: absolute;
  left: -9999px;
}

.cusimg {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;}

.submit-button {
  padding: 50px: 200px;
  position: absolute;
  right: 20px;
}

.middle {
  width: 50%;
  height: 50%;
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.third-row:hover .cusimg {
  opacity: 0.3;
}

.third-row:hover .middle {
  opacity: 1;
}

.text {
	opacity: 3;
  font-size: 16px;
  padding: 16px 32px;
}


input[type="radio"]:checked + label img {
border: 1px solid #000;
}

<div class="row">
        <div class="third-row">
          <input type="radio" name="styleid" value="2" id="2" class="input-hidden" />
          
      <label for="2">
        <img class="cusimg" src="https://cdn-images.gabrielny.com/is/image/GabrielCo/Medium/Gabriel-Chelsea-Platinum-Round-Straight-Engagement-Ring~ER10044PT3JJ-3.jpg" />
      </label>
        </div>
        <div class="third-row">
          <input type="radio" name="styleid" value="1" id="1" class="input-hidden" />
      <label for="1">
        <img class="cusimg" src="https://image.brilliantearth.com/media/shape_images/V3/BE1AS8PD08_RD75_SQ1_PE150_MQ1_white.jpg" />
      </label>
        </div>
        <div class="third-row">
          <input type="radio" name="styleid" value="3" id="3" class="input-hidden" />
      <label for="3">
        <img class="cusimg" src="https://ak1.ostkcdn.com/images/products/9628886/P16814617.jpg" />
      </label>
        </div>
    </div>

Answer 1

解决了自己。

它应该是＆＃34;〜＆＃34;相反，可能与CSS3的兼容性有关？不确定。

input.input-hidden[type="radio"]:checked ~ label img{
border: 1px solid #000;
}

WordPress中的自定义CSS不起作用

1 个答案: