Ajout de l'option Dropdown à un contenu CSS pur Filtre

Question

J'essaie d'ajouter une option de menu déroulant à ce pur filtre CSS qui fait la même action en cliquant sur les boutons radio comme on le voit ici dans le codepen d'origine: http://codepen.io/allienworks/pen/vOGMzV

Cette dropdown serait utilisé pour mobile, tandis que les boutons radio seraient pour medium +.

J'ai essayé quelques options différentes pour obtenir ce cours, y compris en essayant essentiellement tous les sélecteurs connexes, ajoutant au code

select[name="dropdown"] option[value="red"] 

, réarranger, se débarrasser des boutons radio, et quelques autres, mais rien ne semble bouger. Vous pouvez voir ce que j'ai atterri avec, qui semble fonctionner, ici: http://codepen.io/budgetdumpster/pen/rVQbLV

Donc je suppose que ma question est de savoir s'il existe un moyen d'avoir cette option en css pur? Je n'ai pas peur d'utiliser JS ou Jquery en dernier recours, mais je voulais garder le thème pur css.

Merci!

Answer 1

Oui à CSS pur. Il suffit de mettre le label s dans un conteneur et de procéder à leur style comme vous le souhaitez. Vous pouvez utiliser des requêtes multimédias pour styliser le conteneur dans une liste déroulante pour les périphériques plus petits. This article by Scott O'Hara est excellent pour montrer comment utiliser cette supercherie CSS.

body{ 
 
    margin:0; 
 
    text-align:center; 
 
    font-family: Verdana; 
 
    background:#f5f5f5; 
 
} 
 
h1 { 
 
    text-align:center; 
 
} 
 
.container { 
 
    width:90%; 
 
    margin:0 auto; 
 
} 
 
input[type="radio"] { 
 
    display:none; 
 
} 
 
#blue:checked + label { 
 
    background:#6666ff; 
 
} 
 
#blue:checked ~ .tile:not(.blue) { 
 
    width:0; 
 
    height:0; 
 
    padding:0; 
 
    margin:0; 
 
    opacity:0; 
 
} 
 
#red:checked + label { 
 
    background:#ff4466; 
 
} 
 
#red:checked ~ .tile:not(.red) { 
 
    width:0; 
 
    height:0; 
 
    padding:0; 
 
    margin:0; 
 
    opacity:0; 
 
} 
 
#green:checked + label { 
 
    background:#66dd99; 
 
} 
 
#green:checked ~ .tile:not(.green) { 
 
    width:0; 
 
    height:0; 
 
    padding:0; 
 
    margin:0; 
 
    opacity:0; 
 
} 
 

 
.tile { 
 
    width:23%; 
 
    height:100px; 
 
    float:left; 
 
    transition:all 1s; 
 
    margin:0.5%; 
 
    padding:0.5%; 
 
} 
 
.green { 
 
    background:#66dd99; 
 
} 
 
.blue { 
 
    background:#6666ff; 
 
} 
 
.red { 
 
    background:#ff4466; 
 
} 
 

 
.dropdown { 
 
    background-color: #FFF; 
 
} 
 

 
.dropdown label { 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown label:not(.default) { 
 
    display: none; 
 
} 
 

 
.dropdown:hover .default, 
 
.dropdown:focus .default { 
 
    color: lightgray; 
 
} 
 

 
.dropdown:hover label:not(.default), 
 
.dropdown:focus label:not(.default) 
 
{ 
 
    display: block; 
 
}

<h1>FILTER BY COLOR</h1> 
 
<div class="container"> 
 
    <input type="radio" id="blue" name="color" /> 
 
    <input type="radio" id="red" name="color"/> 
 
    <input type="radio" id="green" name="color"/> 
 
    <input type="radio" id="reset" name="color"/> 
 
    <div class="dropdown"> 
 
    <label class="default">Select your option</label> 
 
    <label for="green">GREEN</label> 
 
    <label for="red">RED</label> 
 
    <label for="blue">BLUE</label> 
 
    <label for="reset">RESET</label> 
 
    </div> 
 

 
    <div class="tile blue">1</div> 
 
    <div class="tile red">2</div> 
 
    <div class="tile blue">3</div> 
 
    <div class="tile green">4</div> 
 
    <div class="tile blue">5</div> 
 
    <div class="tile red">6</div> 
 
    <div class="tile red">7</div> 
 
    <div class="tile green">8</div> 
 
    <div class="tile blue">9</div> 
 
    <div class="tile green">10</div> 
 
    <div class="tile red">11</div> 
 
    <div class="tile green">12</div> 
 
    <div class="tile blue">13</div> 
 
    <div class="tile blue">14</div> 
 
    <div class="tile green">15</div> 
 
    <div class="tile red">16</div> 
 
</div>

Answer 2

Ce que vous avez là essentiellement des boutons qui valident la valeur qui leur est définie. Pour la liste déroulante, vous faites cela mais les entrées définissent la valeur. Alors gardez la sélection d'entrée mais ajoutez un bouton qui passe la valeur à rouge ou bleu ou vert.

Ou bien vous pouvez utiliser quelque chose comme:

onBlur vous devrez construire une fonction de validation avec JavaScript qui passera l'info pour la valeur.

C'est une méthode. D'autres pourraient être en mesure de trouver quelque chose de moins noobish que mes idées: P