Comment faire une couleur de fond blanc sur le menu déroulant

Question

Salut les gars, j'utilise ce codepen comme exemple sur mysite. Ma question est, sur le cinquième panneau est possible de faire la liste déroulante lorsque vous cliquez sur une couleur différente?

Html:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Source+Code+Pro' rel='stylesheet' type='text/css'> 

<div class="patch-container"> 
    <div class="patch-item patch-button" data-patch-panel="1">One</div> 
    <div class="patch-panel" data-patch-panel="1">One</div> 
    <div class="patch-item patch-button" data-patch-panel="2">Two</div> 
    <div class="patch-panel" data-patch-panel="2">Two</div> 
    <div class="patch-item patch-button" data-patch-panel="3">Three</div> 
    <div class="patch-panel" data-patch-panel="3">Three</div> 
    <div class="patch-item patch-button wide" id="js-four" data-patch-panel="4">Four</div> 
    <div class="patch-panel" data-patch-panel="4">Four</div> 
    <div class="patch-item patch-button wide" id="js-five" data-patch-panel="5">Five</div> 
    <div class="patch-panel" data-patch-panel="5">Five</div> 
</div> 

CSS:

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
    -webkit-appearance: none; 
} 

body { 
    height: 100%; 
    background-color: #22313F; 
    font-family: 'Open Sans'; 
    -webkit-font-smoothing: subpixel-antialiased; 
} 
/******************************** 
Plugin Hero Example 
********************************/ 

.patch-button { 
    color: #FFF; 
    cursor: pointer; 
    font-size: 1em; 
    font-size: 1.5em; 
    letter-spacing: 0; 
    line-height: 150px; 
} 

.patch-button:hover { 
    border: solid 3px #FFF; 
    line-height: 144px; 
} 

.patch-container { 
    background-color: #2C3E50; 
    border-radius: 5px; 
    color: #FFF; 
    margin: 4%; 
    overflow: auto; 
    padding: 2%; 
    position: relative; 
    text-align: center; 
    zoom: 1; 
    max-width: 1000px; 
} 

.patch-item { 
    background-color: #FFF; 
    border-radius: 4px; 
    float: left; 
    height: 150px; 
    margin: 0 0 2% 0; 
    width: 100%; 
} 

.patch-panel { 
    background-color: #FFF; 
    border-radius: 4px; 
    color: #FFF; 
    display: none; 
    float: left; 
    font-size: 1.5em; 
    height: 250px; 
    line-height: 250px; 
    margin: 0 0 2% 0; 
    width: 100%; 
} 

[data-patch-panel='1'], 
[data-patch-panel='5'], 
[data-patch-panel='8'] { 
    background: #F5AB35; 
} 

[data-patch-panel='2'], 
[data-patch-panel='6'], 
[data-patch-panel='9'] { 
    background: #00B16A; 
} 

[data-patch-panel='3'], 
[data-patch-panel='7'], 
[data-patch-panel='10'] { 
    background: #E74C3C; 
} 

[data-patch-panel='4'], 
[data-patch-panel='8'], 
[data-patch-panel='12'] { 
    background: #3498DB; 
} 
/******************************** 
Media Queries 
********************************/ 

@media only screen and (min-width: 550px) { 
    h2 { 
    font-size: 3.3rem; 
    } 
    .patch-item { 
    margin: 1%; 
    width: 48%; 
    } 
    .patch-panel { 
    margin: 1%; 
    width: 98%; 
    } 
    .components { 
    margin: 1.5%; 
    width: 46%; 
    } 
} 

@media only screen and (min-width: 992px) { 
    .patch-container { 
    margin: 4% auto; 
    } 
    .patch-item { 
    margin: 0.6667%; 
    margin: calc(4%/6); 
    width: 32%; 
    } 
    .patch-panel { 
    margin: 0.6667%; 
    margin: calc(4%/6); 
    width: 98.6666%; 
    width: calc(100% - (4%/6) * 2); 
    } 
    .resize { 
    margin: 50px auto -2%; 
    } 
    .wide { 
    margin: 0.6667%; 
    margin: calc(4%/6); 
    width: 48.6666%; 
    width: calc(50% - (4%/6) * 2); 
    } 
    .thin { 
    width: 23.6666%; 
    width: calc(25% - (4%/6) * 2); 
    } 
} 

Donc, juste pour expliquer à nouveau, tout fonctionne très bien. Mais ce que je veux arriver est sur le panneau 5. La boîte elle-même est bien, mais quand vous cliquez dessus, je voudrais qu'il ne soit pas orange mais une couleur différente sur la nouvelle boîte qui apparaît. Donc, pour la nouvelle boîte apparaisse, je voudrais en blanc avec une bordure noire, mais je ne suis pas sûr de savoir comment

[data-patch-panel='1'], 
[data-patch-panel='5'], 
[data-patch-panel='8'] { 
    background: #F5AB35; 
} 

essayé de jouer avec cette partie, mais cela affecte les deux cases.

Merci pour l'aide

Answer 1

Vous voulez donner le panneau une autre classe, id ou attribut pour l'identifier en dehors du panneau au-dessus. Quelque chose comme ceci:

<div class="patch-panel panel-five" data-patch-panel="5">Five</div> 

puis ajoutez

.panel-five { 
    background-color: #FFFFFF; 
} 

à votre CSS