2017-05-22 21 views
0

アイテムを選択すると、選択したアイテムは選択されません。 以下が強調表示されます(2選択)が、選択された値(値= "1")。 選択したものを選択する方法は? CSS選択した次の選択を選択

.cc-selector input { 
    margin: 0; 
    padding: 0; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    outline: 0 !important; 
    outline-offset: 0 !important; 
} 

.yellow { 
    background-image: url(1.png); 
} 

.orange { 
    background-image: url(2.png); 
} 

.red { 
    background-image: url(3.png); 
} 

.fair { 
    background-image: url(4.png); 
} 

.cc-selector input:active + .priorities-cc { 
    opacity: .9; 
} 

.cc-selector input:checked + .priorities-cc { 
    -webkit-filter: none; 
    -moz-filter: none; 
    filter: none; 
} 

.priorities-cc { 
    cursor: pointer; 
    background-size: contain; 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 100px; 
    height: 70px; 
    -webkit-transition: all 100ms ease-in; 
    -moz-transition: all 100ms ease-in; 
    transition: all 100ms ease-in; 
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7); 
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7); 
    filter: brightness(1.8) grayscale(1) opacity(.7); 
} 

.priorities-cc:hover { 
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9); 
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9); 
    filter: brightness(1.2) grayscale(.5) opacity(.9); 
} 

/* Extras */ 
a:visited { 
    color: #888 
} 

a { 
    color: #444; 
    text-decoration: none; 
} 

p { 
    margin-bottom: .3em; 
} 

HTML

<div class="cc-selector"> 
      <input id="yellow" class="priorities-cc yellow" for="yellow" type="radio" value="1" name="color"> 
      <input id="orange" class="priorities-cc orange" for="orange" type="radio" value="2" name="color"> 
      <input id="red" class="priorities-cc red" for="red" type="radio" value="3" name="color"> 
      <input id="fair" class="priorities-cc fair" for="fair" type="radio" value="4" name="color"> 
     </div> 

はお時間をいただき、ありがとうございます!

答えて

0

あなたがここに https://jsfiddle.net/d1yn7pat/

/* Removed + .priorities-cc */ 
.cc-selector input:checked{ 
    -webkit-filter: none; 
    -moz-filter: none; 
    filter: none; 
} 

をあなたの解決策を見つけることができますが、それは

+0

はあなたに感謝助けを願っています!それは仕事です! – elkens

+0

いいですね。歓声メイト !! –

関連する問題