> For the complete documentation index, see [llms.txt](https://docs.theshoppad.com/infinite-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.theshoppad.com/infinite-options/styling-and-customizations/theme-specific-styling/dawn-theme.md).

# Dawn theme

Paste the Dawn theme CSS snippet into Infinite Options Settings so your option fields match Dawn styling and your product variants.

Copy the code below and paste it into the **Settings >** **Custom CSS** section in Infinite Options to style your options for the Dawn theme.

This code will help the options look better and match your theme and variants.

![](https://docs.theshoppad.com/infinite-options/assets/docsassets555e25e4e4b027e1978e1c9aimages647ea4cb936c7945969ed89afile-bpssv3hcdo.png)

```css
/* Infinite Options by ShopPad */
#infiniteoptions-container {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

#infiniteoptions-container > div {
  padding-bottom: 10px;
}

#infiniteoptions-container div > label,
#infiniteoptions-container .spb-label-tooltip {
  margin-bottom: 3px;
  font-size: 13px !important;
}

#infiniteoptions-container input[type="text"], 
#infiniteoptions-container input[type="number"], 
#infiniteoptions-container select,
#infiniteoptions-container textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.4rem !important;
  color: rgb(var(--color-foreground));
  background-color: transparent;
  line-height: 1.6;
  border-radius: var(--inputs-radius);
  border: 1px solid #888888;
}

#infiniteoptions-container input[type="text"], 
#infiniteoptions-container input[type="number"], 
#infiniteoptions-container select {
  height: 4.5rem;
  padding: 0 4rem 0 1.5rem;
}

#infiniteoptions-container textarea {
  height: 9rem;
  padding: 10px;
}

#infiniteoptions-container select {
  display: inline-block;
  width: 100%;
  background-color: transparent;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgdmlld0JveD0iLTE3LjUgLTEuMyA1MC4xIDI3LjkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5bGluZSBwb2ludHM9IiAxNi4xIDguNSA3LjYgMTcgLTAuOSA4LjUgIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MjtzdHJva2U6IzMwMkYyRkJGIi8+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 24px 24px;
  margin: 0;
  padding-right: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

#infiniteoptions-container select::-ms-expand {
  display: none;
}

#infiniteoptions-container .spb-productdescfont {
  font-size: 1.2rem;
  margin-top: 0;
}

#infiniteoptions-container input[type="checkbox"],
#infiniteoptions-container input[type="radio"] {
  margin: 3px 5px 0px 0px;
  min-height: initial !important;
}

#infiniteoptions-container span label {
  display: block;
}

#infiniteoptions-container fieldset {
  padding: 0 !important;
  border: 0;
  margin: 0 !important;
}

#infiniteoptions-container .spb-productoptionswatchwrapper {
  padding-bottom: 5px !important;
}

#infiniteoptions-container input[type="text"]:focus, 
#infiniteoptions-container input[type="number"]:focus, 
#infiniteoptions-container select:focus, 
#infiniteoptions-container textarea:focus{
  box-shadow: none !important;
  outline: unset !important;
}
```