WordPressのカスタムCSSが機能しない

Question

私は自分のウェブサイトのページを作成するためにWordPressを使用しています。私はCustomCSS Pluginを持っていますが、正しく動作していないようです。

私はラジオボタンの周りにの罫線が必要です。選択した画像。

CSS /ワードプレスの問題がWordPressの問題であるかどうかを確認するために、HTML/CSSプレイグラウンドを作成しました。私が欲しいものが遊び場に正確に表示されます。

CustomCSS Pluginと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 { 
 
\t 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

は自分自身を解決しました。

代わりに「〜」と思われる、おそらくCSS3との互換性とは何か？わからない。

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