I am struggling to make the "Custom" option appear inline with some text and input boxes, like this:
Custom: I would like [ ] x [ ].
However, the display of the text boxes is not working due to a hidden attribute.
I attempted to add the following CSS:
#product .sizes input:not([type:"text"])
{
display: none;
}
But it resulted in a large text box appearing - I'm unsure how to resolve this issue. It's probably a simple fix that I can't seem to figure out.
Any assistance would be greatly appreciated!
#product .sizes label{
position: relative;
color: #2fcc71;
background-color: #fff;
font-size: 1.5rem;
text-align: center;
height: 80px;
line-height: 80px;
display: block;
cursor: pointer;
border: 3px solid #2fcc71;
border-radius: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#product .sizes label span{
display: inline-block !important;
color: #2fcc71;
background-color: #fff;
font-size: 1rem;
text-align: left;
height: 10px !important;
line-height: 10px !important;
}
#product .sizes input:checked + label{
border: 3px solid #333;
background-color: #2fcc71;
color: #fff;
}
#product .sizes input:checked + label:after {
content: "\2713";
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 100%;
border: 2px solid #333;
background-color: #2fcc71;
color: #fff;
z-index: 999;
position: absolute;
top: -10px;
right: -10px;
}
#product .sizes input {
display: none;
} <form id="product">
<section class="sizes">
<div id="fixedSize"></div>
<div id="ChooseSize">
<input type='radio' name='radio_size' id='size1' value='1'><label class='size1-label cell' for='size1'>Standard</label>
<input type='radio' name='radio_size' id='size2' value='2'><label class='size2-label cell' for='size2'>Different</label>
<input type='radio' name='radio_size' id='size3' value='3'><label class='size3-label cell' for='size3'>Custom: I would like <input type="size_h"> x <input name="size_w" type="text"></label>
</div>
</section>
</form>