# Calculator **URL:** https://community.elfsight.com/c/css-codes/calculator/211.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Add scroll for the options list in the Dropdown](https://community.elfsight.com/t/add-scroll-for-the-options-list-in-the-dropdown/73343)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [July 23, 2026, 12:50pm UTC](https://community.elfsight.com/t/add-scroll-for-the-options-list-in-the-dropdown/73343 "2026-07-23T12:50:48Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="Dropdown\_\_DropdownContainer-sc"\] { max-height: 450px; overflow: hidden auto; } Guys, if this code was helpful t… --- ## [Swap out slider button with character](https://community.elfsight.com/t/swap-out-slider-button-with-character/167176)
**Author:** [@Mike\_Waller](https://community.elfsight.com/u/Mike_Waller)\ **Replies:** 1\ **Last updated:** [July 7, 2026, 3:56pm UTC](https://community.elfsight.com/t/swap-out-slider-button-with-character/167176 "2026-07-07T15:56:56Z")
/\* 1. Target the draggable thumb handle wrapper container \*/ \[class\*="SliderThumbBase\_\_Thumb"\], \[class\*="slider\_\_SliderThumb"\], \[role="slider"\] \[class\*="Thumb"\] { width: 44px !important; height: 44px !important; ba… --- ## [Change color of slider control](https://community.elfsight.com/t/change-color-of-slider-control/73341)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [July 7, 2026, 10:05am UTC](https://community.elfsight.com/t/change-color-of-slider-control/73341 "2026-07-07T10:05:09Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*=‘slider\_\_SliderThumb-sc’\] { background: #162B75 !important; } Guys, if this code was helpful to you, please drop… --- ## [Change padding for input and results containers](https://community.elfsight.com/t/change-padding-for-input-and-results-containers/143537)
**Author:** [@Todd](https://community.elfsight.com/u/Todd)\ **Replies:** 1\ **Last updated:** [January 29, 2026, 12:49pm UTC](https://community.elfsight.com/t/change-padding-for-input-and-results-containers/143537 "2026-01-29T12:49:52Z")
The spacing was driving me mad so I figured out how to fix the padding on the form inputs and results containers. Hope it helps! /\* Padding for results container \*/ \[class\*="results\_\_Container-sc"\] { padding: 50px 40p… --- ## [Set custom font for all elements (Calculator)](https://community.elfsight.com/t/set-custom-font-for-all-elements-calculator/57413)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [October 28, 2025, 10:36am UTC](https://community.elfsight.com/t/set-custom-font-for-all-elements-calculator/57413 "2025-10-28T10:36:57Z")
Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add this code to the Custom CSS field on the Settings tab of your Calculator widget’… --- ## [Hide "No results to show"](https://community.elfsight.com/t/hide-no-results-to-show/140899)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 27, 2025, 8:08am UTC](https://community.elfsight.com/t/hide-no-results-to-show/140899 "2025-10-27T08:08:17Z")
dd this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="empty\_\_Empty-sc"\] { display: none; } --- ## [Change font size of the result values](https://community.elfsight.com/t/change-font-size-of-the-result-values/139365)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 5, 2025, 5:55pm UTC](https://community.elfsight.com/t/change-font-size-of-the-result-values/139365 "2025-09-05T17:55:14Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*='animated-number\_\_Content-sc'\] { font-size: 38px !important; } --- ## [Move Results section under the fields](https://community.elfsight.com/t/move-results-section-under-the-fields/139106)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [August 26, 2025, 3:02pm UTC](https://community.elfsight.com/t/move-results-section-under-the-fields/139106 "2025-08-26T15:02:20Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="widget\_\_Layout-sc-"\] { display: block; } \[class\*="results\_\_Container-sc-"\] { position: static; margin-top: 35px; … --- ## [Change color of the button text](https://community.elfsight.com/t/change-color-of-the-button-text/127214)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 20, 2025, 6:20pm UTC](https://community.elfsight.com/t/change-color-of-the-button-text/127214 "2025-06-20T18:20:01Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="ButtonBase\_\_Ellipsis-sc"\] { color: #fff } --- ## [Apply RTL mode](https://community.elfsight.com/t/apply-rtl-mode/127213)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 20, 2025, 6:19pm UTC](https://community.elfsight.com/t/apply-rtl-mode/127213 "2025-06-20T18:19:09Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*='FormFieldLayout\_\_Hint-sc'\], \[class\*='slider\_\_Label-sc'\], \[class\*='FormFieldLayout\_\_Label-sc'\], \[class\*='results\_\_C… --- ## [Fix value of the specific field](https://community.elfsight.com/t/fix-value-of-the-specific-field/127210)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 20, 2025, 6:17pm UTC](https://community.elfsight.com/t/fix-value-of-the-specific-field/127210 "2025-06-20T18:17:15Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="form\_\_FieldLayout-sc"\]:nth-child(1) { pointer-events: none !important; } Here you should set the order number o… --- ## [Display fields in 2 columns](https://community.elfsight.com/t/display-fields-in-2-columns/127208)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 20, 2025, 6:12pm UTC](https://community.elfsight.com/t/display-fields-in-2-columns/127208 "2025-06-20T18:12:47Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*='form\_\_Container-sc'\] { display: flex; flex-wrap: wrap; column-gap: 4%; } \[class\*='FormFieldLayout\_\_Container-sc'\]… --- ## [Change border radius of dropdown fields](https://community.elfsight.com/t/change-border-radius-of-dropdown-fields/127207)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 20, 2025, 6:11pm UTC](https://community.elfsight.com/t/change-border-radius-of-dropdown-fields/127207 "2025-06-20T18:11:54Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="dropdown\_\_Select-sc"\], \[class\*="Dropdown\_\_DropdownContainer-sc"\] { border-radius: 12px !important; } --- ## [Change gap between results](https://community.elfsight.com/t/change-gap-between-results/127206)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 20, 2025, 6:10pm UTC](https://community.elfsight.com/t/change-gap-between-results/127206 "2025-06-20T18:10:49Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="results\_\_Container-sc"\] { gap: 8px !important; } --- ## [Display field hints on hover](https://community.elfsight.com/t/display-field-hints-on-hover/127205)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 20, 2025, 6:09pm UTC](https://community.elfsight.com/t/display-field-hints-on-hover/127205 "2025-06-20T18:09:43Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*='FormFieldLayout\_\_Hint-sc'\] { opacity: 0 !important; transition: opacity 0.3s ease-in-out !important; } \[class\*="F… --- ## [Make Results section static](https://community.elfsight.com/t/make-results-section-static/127204)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 20, 2025, 6:08pm UTC](https://community.elfsight.com/t/make-results-section-static/127204 "2025-06-20T18:08:14Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="results\_\_Container-sc"\] { position: static; } --- ## [Adjust spacing between sections of Results section](https://community.elfsight.com/t/adjust-spacing-between-sections-of-results-section/73344)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 3\ **Last updated:** [May 27, 2025, 1:36pm UTC](https://community.elfsight.com/t/adjust-spacing-between-sections-of-results-section/73344 "2025-05-27T13:36:58Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="results\_\_Container-sc"\] { gap: 15px; } Guys, if this code was helpful to you, please drop a line in the comment… --- ## [Detailed customization of dropdown field](https://community.elfsight.com/t/detailed-customization-of-dropdown-field/122877)
**Author:** [@William62](https://community.elfsight.com/u/William62)\ **Replies:** 0\ **Last updated:** [May 26, 2025, 5:43pm UTC](https://community.elfsight.com/t/detailed-customization-of-dropdown-field/122877 "2025-05-26T17:43:26Z")
Add this code to the Custom CSS field on the Setting tab of the Calculator widget’s settings This code changes border radius, color, width, style, background color and padding in the dropdown field \[class\*=“dropdown\_\_S… --- ## [Change font size in Results section](https://community.elfsight.com/t/change-font-size-in-results-section/73346)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2024, 6:42pm UTC](https://community.elfsight.com/t/change-font-size-in-results-section/73346 "2024-10-01T18:42:56Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: /\* Section title \*/ \[class='results\_\_Container-sc'\] \> \[class\*='typography\_\_Container-sc'\] { font-size: 32px; } /\* Result t… --- ## [Change font and font size of the header](https://community.elfsight.com/t/change-font-and-font-size-of-the-header/73340)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [May 20, 2025, 8:50am UTC](https://community.elfsight.com/t/change-font-and-font-size-of-the-header/73340 "2025-05-20T08:50:43Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*='header\_\_Container-sc'\] \[class\*='typography\_\_Container-sc'\] { font-family: Roboto !important; font-size: 18px !i… --- ## [Change background color of the popup form](https://community.elfsight.com/t/change-background-color-of-the-popup-form/110448)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [March 31, 2025, 2:42pm UTC](https://community.elfsight.com/t/change-background-color-of-the-popup-form/110448 "2025-03-31T14:42:02Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*='email-submit-popup\_\_StyledPopup-sc'\] \[class\*='Background\_\_Base-sc'\] { background-color: #fff !important; } --- ## [Change text color in Results section](https://community.elfsight.com/t/change-text-color-in-results-section/90217)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 18, 2024, 2:23pm UTC](https://community.elfsight.com/t/change-text-color-in-results-section/90217 "2024-12-18T14:23:00Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="results\_\_Container-sc"\] \* { color: tomato; } --- ## [Add paddings](https://community.elfsight.com/t/add-paddings/90220)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 18, 2024, 2:24pm UTC](https://community.elfsight.com/t/add-paddings/90220 "2024-12-18T14:24:42Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="WidgetBackground\_\_Container-sc"\] { padding: 20px 20px !important; } --- ## [Hide Results section](https://community.elfsight.com/t/hide-results-section/90215)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 18, 2024, 2:21pm UTC](https://community.elfsight.com/t/hide-results-section/90215 "2024-12-18T14:21:38Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="results\_\_Container-sc"\] { display: none; } --- ## [Change height of the button](https://community.elfsight.com/t/change-height-of-the-button/73347)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2024, 6:45pm UTC](https://community.elfsight.com/t/change-height-of-the-button/73347 "2024-10-01T18:45:10Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*="cta\_\_Container-sc"\] \[class\*="ButtonBase\_\_Overlay-sc"\] { padding: 0px 20.5px !important; } Guys, if this code wa… --- ## [Change font size of the options in Dropdown field](https://community.elfsight.com/t/change-font-size-of-the-options-in-dropdown-field/73342)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2024, 6:35pm UTC](https://community.elfsight.com/t/change-font-size-of-the-options-in-dropdown-field/73342 "2024-10-01T18:35:06Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*='DropdownItem\_\_ItemContainer-sc'\] { font-size: 15px; } Guys, if this code was helpful to you, please drop a line… --- ## [Change font size of all elements](https://community.elfsight.com/t/change-font-size-of-all-elements/63828)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 31, 2024, 1:46pm UTC](https://community.elfsight.com/t/change-font-size-of-all-elements/63828 "2024-07-31T13:46:56Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: /\*Title\*/ \[class\*="header\_\_Container-sc"\] \> div:nth-child(1) { font-size: 25px !important; } /\*Subtitle\*/ \[class\*="header… --- ## [Display hints on hover only for Slider fields](https://community.elfsight.com/t/display-hints-on-hover-only-for-slider-fields/57414)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 18, 2024, 8:31am UTC](https://community.elfsight.com/t/display-hints-on-hover-only-for-slider-fields/57414 "2024-06-18T08:31:04Z")
Add this code to the Custom CSS field on the Settings tab of your Calculator widget’s settings: \[class\*='FormFieldLayout\_\_Hint-sc'\] { opacity: 0; transition: opacity 0.3s ease-in-out; } \[class\*='FormFieldLayout\_\_Hi…