How to Style a Custom Select Box using CSS and Javascript

Yesterday we were working on a wordpress website, we installed a gravity form on our contact page and there was a select box has been fixed on that form. We have gone through the design and everything looks good, but the select boxes’ arrows weren’t matching with our website in its default style. We thought of a solution to fix this issue for sometime and at last we found that changing the select boxes custom design from default style is a solution for this. While implementing, we can see that this method works well with all modern browsers.

Please find below code which helps you to resolve these type of issues.

CSS

.custom-select select {
    width: 480px;
    border: 1px solid #31A9C7;
    color: #999;
    padding: 10px;
    line-height: 40px;
}

.custom-select:after {
    background: url("select.png") no-repeat scroll center center #31A9C7;
    border-bottom: 1px solid #31A9C7;
    border-right: 1px solid #31A9C7;
    border-top: 1px solid #31A9C7;
    bottom: 0;
    color: white;
    content: " ";
    line-height: 40px;
    padding: 0 7px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 15px;
}

/* Css Style for safari */
::-webkit-scrollbar, .custom-select:after {
    top: 2px;
    bottom: 2px;
}

.custom-select {
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}

.custom-select, .custom-select ul {
    left: 0;
    position: relative;
    top: 0;
}

.custom-select {
    z-index: 1;
}

HTML CODE

<div class='custom-select'>	
   
    <select>
    
    <option value="volvo">Volvo</option>
    
    <option value="saab">Saab</option>
    
    <option value="mercedes">Mercedes</option>
    
    <option value="audi">Audi</option>
    
    </select>

</div>

Javascript (For Gravity Form)

$('select').wrap("</p><div class='custom-select'></div><p>");

By implementing the provided code, you can address issues such as the appearance of the select box arrow, ensuring a consistent and cohesive design across all browsers. This method is effective and compatible with modern browsers, providing a visually appealing solution for select box styling.

In summary, the ability to customize select box styles enhances the overall user experience on your WordPress website, especially when integrating plugins like Gravity Forms. This simple yet impactful adjustment contributes to a polished and professional look for your site’s forms.