Radio button color change

[xmascarol71]

hi! Thank You SO MUCH in advance for your help 🙂

will someone please help me figure out how to change a radio button color to #883677 ?

(The code currently defaults to blue.)

thank you!!!

this is what we currently have:

<span class="field__label-choice"> * I'm reaching out about</span>
<label for="ContactForm-a-custom-order" class="radio-label">
<input
type="radio"
id="ContactForm-a-custom-order"
name="contact[Inquiry]"
value="a-Custom-Order"
class="radio-button"
checked="checked"
>
a Custom Order
</label>
<label for="ContactForm-a-subscription" class="radio-label">
<input
type="radio"
id="ContactForm-returning-customer"
name="contact[Inquiry]"
value="a-Subscription"
class="radio-button"
>
a Subscription
</label>
<label for="ContactForm-Something-Else" class="radio-label">
<input
type="radio"
id="ContactForm-Something-Else"
name="contact[Inquiry]"
value="Something-Else"
class="radio-button"
>
Something Else
</label>

[shahrozbabar5 · Accepted solution]

@xmascarol71,

Here's an easy way to change your radio button color to #883677 using CSS:

.radio-button:checked + label,
.radio-button:checked {
  accent-color: #883677;
}

Or more specifically, add this to your CSS:

input[type="radio"].radio-button:checked {
  accent-color: #883677;
}

Note: Modern browsers support accent-color to change the radio button color without custom images.

If your theme or browser doesn’t support accent-color, you’d need custom styles with hidden inputs and styled labels, which is more complex.

If it resolves your issue, please mark my answer as a solution, or if you want me to fix this, DM

[xmascarol71]

Beautiful!!! Thank you SOOOO much for your help!!!😊

[xmascarol71]

thank you again! May i please ask for one more little thing? what do i need to do so that the text in this field lines up horizontally with the text in the other fields? (as you'll see in the screenshot below, the * I'm reaching out about text is farther left than Name, Phone, Comment.) thank you! 🙂

[devcoders]

Hello @xmascarol71 

1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. In the Assets folder, open base.css and add your CSS code at the end

input.radio-button {
appearance: none;
-webkit-appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1.2em;
height: 1.2em;
border: 2px solid #883677;
border-radius: 50%;
display: grid;
place-content: center;
cursor: pointer;
position: relative;
vertical-align: middle;
}

input.radio-button:checked::before {
content: "";
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background-color: #883677;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

[xmascarol71]

fantastic! this also worked beautifully. thank you SO much for your assistance, we appreciate you!😉