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>
はお時間をいただき、ありがとうございます!
はあなたに感謝助けを願っています!それは仕事です! – elkens
いいですね。歓声メイト !! –