# Rental Widget - Custom Styling

If the configuration options of the Product Rentals Pro Rental Widget aren't enough for you to get the Rental Widget looking as you'd like, you can customize it with custom CSS.

There are two ways to do this:

1. Using the "Custom CSS" box within the [theme block configuration options](https://docs.productrentalspro.com/user-guide/rental-widget/rental-widget-configuration-options)
2. Applying custom CSS via an external CSS file, targeting the Rental Widget's CSS selectors

Below we break down the main CSS selectors to target, which can then be applied in either of the two ways above.

## Options, Labels, Text & Buttons

<table><thead><tr><th width="201">Element</th><th width="308">CSS Selector</th><th>Example</th></tr></thead><tbody><tr><td>Option</td><td><code>.rw-form .product-form__input fieldset</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FVlMBJdB5G5N7elFid5Z2%2Fimage.png?alt=media&#x26;token=ca0b7643-11d7-47ea-8dde-486ebd52bc18" alt="" data-size="original"></td></tr><tr><td>Option Label</td><td><code>.rw-form .product-form__input legend</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FBtWUbfkdvvr5KgjnyE96%2Fimage.png?alt=media&#x26;token=b2eb22ea-3cea-449d-a8e0-54775bc00c09" alt="" data-size="original"></td></tr><tr><td>Option Values</td><td><code>.rw-form .product-form__input label</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FwP1Z9ck5GjjHQJpL7Qbv%2Fimage.png?alt=media&#x26;token=399da659-e365-40f8-855f-10a9010b335e" alt="" data-size="original"></td></tr><tr><td>Selected Option Values</td><td><code>.rw-form .product-form__input input[type=radio]:checked+label</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FXmcAJrgVAtxVrxv1x9TV%2Fimage.png?alt=media&#x26;token=de405542-92be-420c-85ce-1fd9ae11d47d" alt="" data-size="original"></td></tr><tr><td>Text above and below calendar</td><td><code>.rw-datepicker-text</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FCbNjjHBcyFYphilgmOkc%2Fimage.png?alt=media&#x26;token=23c771ce-70b5-42bc-b93b-e383f3fa8c6e" alt="" data-size="original"></td></tr><tr><td>Text above calendar</td><td><code>.rw-datepicker-text__above</code></td><td>As above, but only for the text above the calendar.</td></tr><tr><td>Text below calendar</td><td><code>.rw-datepicker-text__below</code></td><td>As above, but only for the text below the calendar.</td></tr><tr><td>Recap Selected Date Label</td><td><code>.rw-recap_date-label</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FRRB2u2VtpFn3rZBlL1Om%2Fimage.png?alt=media&#x26;token=cabebb95-4f64-4aa8-b561-671146c1394a" alt="" data-size="original"></td></tr><tr><td>Recap Selected Date</td><td><code>.rw-recape_date-text</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2F0xa80iJIhkkot4PjBIjn%2Fimage.png?alt=media&#x26;token=c5997ee0-bd2d-4dae-b59d-f4ff8ddc2982" alt="" data-size="original"></td></tr><tr><td>Recap Price Label</td><td><code>.rw-recap_price-label</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FhLaYQcoZQqQ9v7bbmMha%2Fimage.png?alt=media&#x26;token=9b283d87-e7a3-4525-ad77-e743ca5a1026" alt="" data-size="original"></td></tr><tr><td>Recap Price</td><td><code>.rw-recap_price-text</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FvUtaY15jZknBCxjNS8X5%2Fimage.png?alt=media&#x26;token=7e219602-af39-400b-93e4-31b954af14de" alt="" data-size="original"></td></tr><tr><td>Add To Cart Button</td><td><code>.rw-submit</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FWrxC2lRRMP4EeqsdJbDq%2Fimage.png?alt=media&#x26;token=dfd59b03-f6b5-4022-bd12-f3dd5e0cb0b3" alt="" data-size="original"></td></tr><tr><td>Add To Cart Button (disabled state)</td><td><code>.rw-submit[disabled]</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FaCHa4eZChnfFkopHdo8n%2Fimage.png?alt=media&#x26;token=00cc9371-0e1a-4d92-9b1b-99715fc06f58" alt="" data-size="original"></td></tr></tbody></table>

## Calendar

<table><thead><tr><th width="200">Element</th><th width="294">CSS Selector</th><th>Example</th></tr></thead><tbody><tr><td>Calendar</td><td><code>.rw-calendar</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FQq6R8pEpRA919XPnzTOw%2Fimage.png?alt=media&#x26;token=6c1fc32e-8a56-4fc7-a4cf-daafa8e6d88c" alt="" data-size="original"></td></tr><tr><td>Current Month Label</td><td><code>.rw-calendar_current-month</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FLwCYRTic4cyYeQYImZXq%2Fimage.png?alt=media&#x26;token=314e4330-50a0-4cc7-b5a3-5820c47513df" alt="" data-size="original"></td></tr><tr><td>Current Year Label</td><td><code>.rw-calendar_current-year</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FlYoEYiapFMXjCfY4aHhK%2Fimage.png?alt=media&#x26;token=73d98687-7a78-4776-a1b2-2002dbd8a792" alt="" data-size="original"></td></tr><tr><td>Days of the Week</td><td><code>.rw-calendar_day-of-week</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FUqcYyzg2eA973Ltj6m42%2Fimage.png?alt=media&#x26;token=bfcc32ce-6e53-4d99-b223-3bf78b5e2b6c" alt="" data-size="original"></td></tr><tr><td>Individual Date Cell</td><td><code>.rw-calendar_date-cell</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FlHGmKWSF79I02noI5KdB%2Fimage.png?alt=media&#x26;token=36246ac8-1895-4a00-b652-c6c3ee668311" alt="" data-size="original"></td></tr><tr><td>Date Cell (disabled)</td><td><code>.rw-calendar_date-cell.disabled</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FJ6nIbHsExRt7PWU1Gv7d%2Fimage.png?alt=media&#x26;token=b070bcab-d163-450f-b1a9-5f67b3170869" alt="" data-size="original"></td></tr><tr><td>Date Cell (selected)</td><td><code>.rw-calendar_date-cell.selected</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FoV2qBjWmb5ZdZOTJq7UH%2Fimage.png?alt=media&#x26;token=e0da7cb7-7567-416f-a84b-d9d73b82285e" alt="" data-size="original"></td></tr><tr><td>Date Cell (hover)</td><td><code>.rw-calendar_date-cell.hover</code></td><td><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FE6Ruj1HtdaTl1hS7B8bN%2Fimage.png?alt=media&#x26;token=5c750522-da1c-4d00-b58b-e1ffe5ca7281" alt="" data-size="original"></td></tr></tbody></table>

## Other Elements

To apply CSS adjustments to more specific parts of the calendar, or Rental Widget, determine the appropriate CSS selectors via browser Developer Tools. If you aren't a developer and need further guidance, please [contact our support team](https://tally.so/r/mVlWGy) and we'll be happy to assist.

## Applying Different Styles when Dates have been Selected

When a customer selects dates in the Rental Widget, an additional CSS class is applied to the Rental Widget container.

The Rental Widget container always has a class of `.rw-container` applied to it.

When dates have been selected an additional class gets added of `.rw-dates-selected`

Below is an example of how you might use this is to make content appear, or become more prominent once dates have been selected.

### Example - Highlighting the Insurance Option

If you're using the [Insurance Add-On](https://docs.productrentalspro.com/user-guide/settings/add-ons-insurance) feature of Product Rentals Pro, you might realise that by default, it doesn't really stand out much, so customers may not notice it or pay a lot of attention to it. This means potential lost revenue for your business.

This can be helped by changing the appearance with custom CSS. At the same time, you may not want to make your product page look too busy, distracting, or just ugly.

Because an additional class is added to the Rental Widget container once dates have been selected, you can have the insurance option appear plain and simple to begin with (or even have it hidden), but then make it really stand out as soon as the customer has selected dates, so that it's almost impossible to miss before they click the **Rent Now** button (or whatever you have labelled in the PRP settings.

Before dates have been selected:

<div align="left"><figure><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2FA1yMfvqoI5LWV2pbePDQ%2Fimage.png?alt=media&#x26;token=144fb449-3091-47ad-896e-873c28b71578" alt=""><figcaption></figcaption></figure></div>

After dates have been selected:

<div align="left"><figure><img src="https://234434261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmpQXZYRz6niON4PyVhfO%2Fuploads%2F6rgiR1KtCXQa9w0gI9wB%2Finsurance-animated.gif?alt=media&#x26;token=d310c209-3325-477e-8547-763e64ae0594" alt=""><figcaption></figcaption></figure></div>

Notice that there is a 'shine' effect that appears every few seconds. This might be considered too much to always be there, but is fine to apply only once someone has selected variant options and rental dates. The CSS even injects some extra text into the box ("Protect yourself from accidents for a low fee").

Below is the custom CSS that was applied to achieve the appearance above.

```css
.rw-container.rw-date-selected .rw-insurance {
	padding: 5px 10px;
	background-color: #ffe3e7;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	letter-spacing: 0;
	border: 1px solid #000;
	border-radius: 4px;
}

.rw-container.rw-date-selected .rw-insurance .rw-extra-input {
	margin-right: 8px;
	width: 18px;
	height: 18px;
	margin-left: 0;
	accent-color: #000000;
	margin-top: 4px;
}

.rw-container.rw-date-selected .rw-insurance .rw-insurance-text {
	flex: 1 1 60%;
}

.rw-container.rw-date-selected .rw-insurance .rw-insurance-text {
	font-size: 15px;
	font-weight: 600;
}

.rw-container.rw-date-selected .rw-insurance .rw-insurance-price {
	flex: 0 0 auto;
	font-weight: bold;
	text-align: right;
	margin-left: auto;
}

.rw-container.rw-date-selected .rw-insurance::after {
	content: 'Protect yourself from accidents for a low fee';
	display: inline-block;
	font-size: 13px;
	margin-right: auto;
	order: 1;
}

.rw-container.rw-date-selected .rw-insurance .modal-open-button {
	margin-left: auto;
	text-decoration: underline;
	white-space: nowrap;
	order: 2;
}

.rw-container.rw-date-selected .rw-insurance::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 30%;
	height: 100%;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 100%);
	transform: skewX(-30deg);
	animation: shine 4s infinite ease-in-out;
}

@keyframes shine {
	0% {
		left: -100%;
	}

	20% {
		left: 110%;
	}

	100% {
		left: 110%;
	}
}
```