Sometimes even a small CSS tweak can make a widget feel much more personal.
A great example comes from @Mike_Waller, who shared a creative way to customize the Calculator widget by replacing the default handle of the Slider field with a custom emoji.
What’s the use case?
Mike uses the Calculator widget to estimate a donation per mile for a charity bike ride. To match the idea of the calculator, he replaced the standard Slider handle with a cyclist 
.
Before:
Now:
It’s a small detail, but it makes the Slider fit the calculator’s purpose much better 
How to implement it
Add the following code to the Custom CSS field in the Settings tab of your widget’s settings:
/* Target the draggable slider handle */
[class*="SliderThumbBase__Thumb"],
[class*="slider__SliderThumb"],
[role="slider"] [class*="Thumb"] {
width: 44px !important;
height: 44px !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* Add a custom emoji as the slider handle */
[class*="SliderThumbBase__Thumb"]::after,
[class*="slider__SliderThumb"]::after,
[role="slider"] [class*="Thumb"]::after {
content: "🚴" !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
top: -16px !important;
left: 50% !important;
font-size: 38px !important;
line-height: 1 !important;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
transform: translateX(-50%) scaleX(-1) !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 99999 !important;
}
To use another emoji, simply replace the cyclist in this line of the code:
See how it may look in other templates
You could use a car 
for a Car Rental Cost Calculator:
content: "🚗" !important;
Or a house 
for a Mortgage Calculator:
content: "🏠" !important;
How to customize the emoji
Change size
Adjust the font-size value:
Increase the number to make the emoji larger, or decrease it to make it smaller.
Move it up or down
Change the top value to adjust the position of the emoji:
A more negative value moves the emoji higher, while a value closer to zero moves it lower.
Flip its direction
In Mike’s example, the cyclist is flipped horizontally:
Here:
translateX(-50%)keeps the emoji centered on the Slider handle.scaleX(-1)flips it horizontally.
If the emoji is already facing the right direction, remove scaleX(-1):
transform: translateX(-50%) !important;
That’s it — you can now choose an emoji that matches the purpose of your own Calculator! Many thanks to @Mike_Waller for sharing this awesome solution 
Find more practical ideas for the Calculator and other widgets in our CSS Codes and Tips & Discussions categories. Feel free to explore and ask questions!
