> 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/craft-theme.md).

# Craft theme

Copy the CSS snippet for the Craft theme into Infinite Options Settings so your option fields look neat on Craft product pages.

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

This will make options look nicer on your product pages :)

![](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 {
  display: inline-block;
  margin-bottom: 5px;
  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: var(--variant-pills-border-width) solid rgba(var(--color-foreground),var(--variant-pills-border-opacity));
}

#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;
}
```