Style Radio Button
.gfield_radio{
width: 100% !important;
li{
display: inline-block;
position: relative;
width: 33.33%;
text-align: center;
input[type="radio"] {
display: none;
&:checked+label {
background-color: #F96E3D;
border:1px solid #F96E3D;
border-radius: 20px;
color: #fff;
}
}
label{
display: inline-block;
background-color: #fff;
border: 1px solid #535353;
border-radius: 20px;
text-align: center;
padding: 9px 0px;
font-size: 14px;
color: #535353;
line-height: 1.5em;
cursor: pointer;
height: 40px;
width: 95%;
max-width: 95%;
}
}
}
Select Field Placeholder forced opacity
<script type="text/javascript">
var dropdown = document.getElementById('input_1_5');
//var dropdown = document.getElementsByClassName('gfield_select');
var value = dropdown.options[dropdown.selectedIndex].value;
var text = dropdown.options[dropdown.selectedIndex].text;
if(text == 'Please select'){
dropdown.classList.add('placeholder');
};
dropdown.classList.add('placeholder');
dropdown.addEventListener("change", placeHolderOpacity);
function placeHolderOpacity() {
let value = dropdown.options[dropdown.selectedIndex].value;
let text = dropdown.options[dropdown.selectedIndex].text;
dropdown.classList.remove('placeholder');
if(text == 'Please select'){
dropdown.classList.add('placeholder');
};
}
</script>
Dropdown placeholder opacity
select.placeholder{
color: #999 !important;
}
select::-webkit-input-placeholder,
input::-webkit-input-placeholder {
color: #999 !important;
opacity: 1 !important;
}
select:-moz-placeholder,
input:-moz-placeholder {
color: #999 !important;
opacity: 1 !important;
}
select::-moz-placeholder,
input::-moz-placeholder {
color: #999 !important;
opacity: 1 !important;
}
select:-ms-input-placeholder,
input:-ms-input-placeholder {
color: #999 !important;
opacity: 1 !important;
}
<script type="text/javascript">
$('#gform_1').find('.gfield_select').each(function(e){
$(this).addClass("placeholder");
$(this).change(function() {
var selectedText = $(this).find("option:selected").text();
if(selectedText != 'Please select'){
$(this).removeClass( "placeholder" );
}else{
$(this).addClass("placeholder");
}
});
});
</script>