Text in span not displayed where it should

i have the following html:

<div class="quickselect">
<div class="middle">
<label class="label_quickselect">
<input class="input_quickselect" type="radio" name="qty" value="1" checked/>
<div class="quantity box">
<span>1X</span>
</div>
</label>

<label class="label_quickselect">
<input class="input_quickselect" type="radio" name="qty" value="2"/>
<div class="quantity box">
<span>2X</span>
</div>
</label>
<label class="label_quickselect">
<input class="input_quickselect" type="radio" name="qty" value="3"/>
<div class="quantity box">
<span>3X</span>
</div>
</label>
</div>
</div>


and the corresponding css:

.middle
width: 100%;
text-align: center;
display: inline;

.middle .input_quickselect
display: none;

.middle .input_quickselect:checked + .box
background-color: white;

.middle .input_quickselect:checked + .box span
color: black;
transform: translateY(70px);

.middle .input_quickselect:checked + .box span:before
transform: translateY(0px);
opacity: 1;

.middle .box
width: 36px;
height: 36px;
background-color: white;
color: black;
transition: all 250ms ease;
will-change: transition;
display: inline-block;
text-align: center;
cursor: pointer;
position: relative;
border: 2px solid black;
font-family: "sans-serif", sans-serif;
font-weight: 900;

.middle .box:active
transform: translateY(10px);

.middle .box span
position: relative;
transform: translate(0, 60px);
left: 0;
right: 0;
top: 20%;
transition: all 300ms ease;
font-size: 1.0em;
user-select: none;
color: black;

.middle .box span:before
font-size: 1.2em;
font-family: FontAwesome;
display: block;
transform: translateY(-80px);
opacity: 0;
transition: all 300ms ease-in-out;
font-weight: normal;
color: black;



So the radio buttons are styled as box with a nice animation on click.

Unfortunately, the text of the active button (the span) is not displayed, as supposed to be, in the center of the button, instead it is way below the button.

Can anyone help me there?

1 Answer
1

So the problem was indeed a translate() function:

.middle .input_quickselect:checked + .box span
color: black;
transform: translateY(70px);



caused the span to move down by 70 pixels.
Thanks to Rachel Gallen.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.