Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet

Type: css

Price Range Slider (CSS)

input[type=”range”] { -webkit-appearance: none; width: 100%; height: 8px !important; min-height: 8px !important; background: #ccc !important; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; margin: 20px 0; } input[type=”range”]:hover { opacity: 1; } input[type=”range”]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width:…Continue reading

Custom Style Icons for Rating field

div.wpforms-container-full form#wpforms-form-1000 .wpforms-field-rating svg { fill: transparent !important; stroke: #448ccb !important; stroke-width: 20px !important; opacity: 1 !important; } div.wpforms-container-full form#wpforms-form-1000 .wpforms-field-rating-item svg:hover { fill: #448ccb !important; } div.wpforms-container-full form#wpforms-form-1000 .wpforms-field-rating-item.selected svg { fill: #448ccb !important; transform: none !important; } div.wpforms-container-full…Continue reading

Focused Form Fields

form#wpforms-form-1000 input:focus, form#wpforms-form-1000 textarea:focus { box-shadow: 5px 5px 10px #ccc; } form#wpforms-form-1000 input, form#wpforms-form-1000 textarea { transition: box-shadow 0.3s ease-in-out; } form#wpforms-form-1000 button[type=submit]:hover { box-shadow: 5px 5px 10px #ccc; border: 1px solid #ccc; background-color: #eee; } form#wpforms-form-1000 button[type=submit] { border:…Continue reading

Move Admin Bar to the Bottom

body {margin-top: -30px;padding-bottom: 30px;} body.admin-bar #wphead {padding-top: 5px;} body.admin-bar #footer {padding-bottom: 30px;} #wpadminbar { top: auto !important;bottom: 0;} #wpadminbar .menupop .ab-sub-wrapper { bottom: 34px; }Continue reading

Centering All Form Elements

/* Center the form container */ .wpforms-container.wpf-center { margin: 0 auto !important; max-width: 500px !important; width: 500px !important; } /* Center submit button and make it full width */ .wpf-center .wpforms-submit-container { display: inline-block; text-align: center; width: 100% !important; }…Continue reading

How to Center a Form

.wpforms-container.wpf-center { margin: 0 auto !important; /* Adjust the width in the next 2 lines as your site needs */ max-width: 500px !important; width: 500px !important; } /* Readjust the form width for smaller devices */ @media only screen and…Continue reading

Modern CSS Reset

/* 1. Use a more-intuitive box-sizing model */ *, *::before, *::after { box-sizing: border-box; } /* 2. Remove default margin */ * { margin: 0; } body { /* 3. Add accessible line-height */ line-height: 1.5; /* 4. Improve text…Continue reading