Radio Buttons Select
Виберiть зображення
Gallery image #1
Gallery image #2
Gallery image #3
Gallery image #4
Gallery image #5
PHP
<div class="select_box">
<div class="select_box_current" tabindex="1">
<div class="select_box_value">
<input class="select_box_input" type="radio" id="image_0" value="0" name="id_image" checked="checked">
<p class="select_box_text">Виберiть зображення</p>
</div>
<?php for ($i = 1; $i < 6; $i++) :?>
<div class="select_box_value">
<input class="select_box_input" type="radio" id="image_<?= $i ?>" value="<?= $i ?>" name="id_image">
<p class="select_box_text">
<img src="/img/gallery_img_<?= $i ?>.jpg" alt="Gallery image #<?= $i ?>">
<span>Gallery image #<?= $i ?></span>
</p>
</div>
<?php endfor ;?>
<span class="select_box_icon">
<?= svg('iconDownload','') ?>
</span>
</div>
<ul class="select_box_list">
<li>
<label class="select_box_option" for="image_0">Виберiть зображення</label>
</li>
<?php for ($i = 1; $i < 6; $i++) :?>
<li>
<label class="select_box_option" for="image_<?= $i ?>">
<img src="/img/gallery_img_<?= $i ?>.jpg" alt="Gallery image #<?= $i ?>">
<span>Gallery image #<?= $i ?></span>
</label>
</li>
<?php endfor ;?>
</ul>
</div>CSS
.select_box{position:relative;display:block;width:100%;font-size:1.5rem;color:#262b33}
.select_box_current{border:.1rem solid #ccc;cursor:pointer}
.select_box_current:focus + .select_box_list{opacity:1;-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}
.select_box_current:focus + .select_box_list .select_box_option{cursor:pointer}
.select_box_current:focus .select_box_icon{-webkit-transform:translateY(-50%) rotate(180deg);-moz-transform:translateY(-50%) rotate(180deg);-ms-transform:translateY(-50%) rotate(180deg);-o-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}
.select_box_icon{position:absolute;top:50%;right:1.5rem;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);width:2rem;height:2rem;color:#262b33;opacity:.3;-webkit-transition:.2s ease;-o-transition:.2s ease;-moz-transition:.2s ease;transition:.2s ease}
.select_box_value{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}
.select_box_input{display:none}
.select_box_input:checked + .select_box_text{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}
.select_box_text{display:none;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:6rem;margin:0;padding:1rem 5rem 1rem 1.5rem;background-color:#fff}
.select_box_list{position:absolute;top:-webkit-calc(100% + 1rem);top:-moz-calc(100% + 1rem);top:calc(100% + 1rem);left:0;z-index:5;width:100%;border:.1rem solid #ccc;padding:0;opacity:0;-webkit-animation-name:HideList;-moz-animation-name:HideList;-o-animation-name:HideList;animation-name:HideList;-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-o-animation-delay:.5s;animation-delay:.5s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:step-start;-moz-animation-timing-function:step-start;-o-animation-timing-function:step-start;animation-timing-function:step-start}
.select_box_option{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:6rem;padding:1rem 5rem 1rem 1.5rem;background-color:#fff}
.select_box_option:focus{color:#617d8b;background-color:#fbfbfb}
.select_box_option img,.select_box_text img{width:4rem;height:4rem;margin:0 1.5rem 0 0;-o-object-fit: contain;object-fit: contain;font-family: 'object-fit: contain;'}
.select_box_option span,.select_box_text span{display:inline-block;width:-webkit-calc(100% - 5.5rem);width:-moz-calc(100% - 5.5rem);width:calc(100% - 5.5rem)}
@-webkit-keyframes HideList {
from{-webkit-transform:scaleY(1);transform:scaleY(1)}
to{-webkit-transform:scaleY(0);transform:scaleY(0)}
}
@-moz-keyframes HideList {
from{-moz-transform:scaleY(1);transform:scaleY(1)}
to{-moz-transform:scaleY(0);transform:scaleY(0)}
}
@-o-keyframes HideList {
from{-o-transform:scaleY(1);transform:scaleY(1)}
to{-o-transform:scaleY(0);transform:scaleY(0)}
}
@keyframes HideList {
from{-webkit-transform:scaleY(1);-moz-transform:scaleY(1);-o-transform:scaleY(1);transform:scaleY(1)}
to{-webkit-transform:scaleY(0);-moz-transform:scaleY(0);-o-transform:scaleY(0);transform:scaleY(0)}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.select_box_option:hover{color:#617d8b;background-color:#fbfbfb}
}SCSS
.select_box {
position: relative;
display: block;
width: 100%;
font-size: 1.5rem;
color: #262b33;
}
.select_box_current {
border: .1rem solid #cccccc;
cursor: pointer;
&:focus{
+ .select_box_list {
opacity: 1;
animation-name: none;
.select_box_option {
cursor: pointer;
}
}
.select_box_icon {
transform: translateY(-50%) rotate(180deg);
}
}
}
.select_box_icon {
position: absolute;
top: 50%;
right: 1.5rem;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
color: #262b33;
opacity: 0.3;
transition: 0.2s ease;
}
.select_box_value {
display: flex;
}
.select_box_input {
display: none;
&:checked + .select_box_text {
display: flex;
}
}
.select_box_text {
display: none;
align-items: center;
width: 100%;
height: 6rem;
margin: 0;
padding: 1rem 5rem 1rem 1.5rem;
background-color: #ffffff;
}
.select_box_list {
position: absolute;
top: calc(100% + 1rem);
left: 0;
z-index: 5;
width: 100%;
border: .1rem solid #cccccc;
padding: 0;
opacity: 0;
animation-name: HideList;
animation-duration: 0.5s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: step-start;
}
.select_box_option {
display: flex;
align-items: center;
width: 100%;
height: 6rem;
padding: 1rem 5rem 1rem 1.5rem;
background-color: #ffffff;
&:focus {
color: #617d8b;
background-color: #fbfbfb;
}
}
.select_box_option, .select_box_text {
img {
width: 4rem;
height: 4rem;
margin: 0 1.5rem 0 0;
object-fit: contain;
font-family: 'object-fit: contain;';
}
span {
display: inline-block;
width: calc(100% - 5.5rem);
}
}
@keyframes HideList {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.select_box_option:hover {color: #617d8b;background-color: #fbfbfb;}
}