Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet

Type: css

Adding Transitions to Checkbox and Multiple Choice Selections

ul#wpforms-999-field_3 li label, ul#wpforms-999-field_27 li label { padding: 10px; transition: all ease 0.3s; background: linear-gradient(to right, #e27730 50%, #cd631d 50%); background-size: 200% 100%; background-position: left bottom; color: white; } ul#wpforms-999-field_3 li.wpforms-selected label, ul#wpforms-999-field_3 li label:hover, ul#wpforms-999-field_27 li.wpforms-selected label, ul#wpforms-999-field_27 li…Continue reading

Adding Images to Checkboxes

ul#wpforms-1000-field_25 li.choice-1 label:before { content: “”; display: inline-block; background-image: url(http://yoursite.com/wp-content/uploads/2019/10/your-image-filename.png); background-size: 100%; height: 45px; width: 30px; background-repeat: no-repeat; position: relative; right: 5px; top: 20px; }Continue reading

Clickable phone number

.top-phone-number { position: fixed !important; left: 80px !important; top: 240px !important; z-index: 999999 !important; } /* When the sticky header is active, move the phone number up */ .sticky-menu .top-phone-number { top: 70px !important; /* Adjust this value as needed…Continue reading

Untitled Snippet

body { font-family: Arial, sans-serif; text-align: center; margin: 20px; background-color: #f9f9f9; color: #333; } h1 { color: #4a90e2; } #controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; } #controls input, #controls button { padding: 10px; font-size:…Continue reading

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