Useful codes for Gravity Form Plugin.

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>

Contact me.

I would love to hear from you, send me a message using the form below.

    ×