[css-forms-1] Radio buttons should have space between border and "checkmark"

[lukewarlow]

Currently the styles for radio buttons don't provide any gap between the border and the inner "checkmark".

I propose we add:

input[type="radio"] {
    padding: 0.15em;
}

[nt1m]

I would rather have the radio button use a shape that's smaller than its border-box. A padding will likely just end up as an extra thing to override for most people.

[lukewarlow]

To clarify do you mean something like below? Or do you have something else in mind?

input[type=radio]:checked::checkmark {
    content: '';
    background-color: currentColor;
    display: inline-block;
    border-radius: inherit;
-   height: 100%;
-   width: 100%;
+   height: 70%;
+   width: 70%;
}

[css-meeting-bot]

The CSS Working Group just discussed [css-forms-1] Radio buttons should have space between border and "checkmark", and agreed to the following:

• RESOLVED: prototype a solution for this issue

The full IRC log of that discussion

<jarhar> ntim: in all cases we have to set the width and height, so might as well just set it to a smaller width and height
<jarhar> lwarlow: so on the checkmark pseudo element set the width and height to 70%?
<jarhar> ntim: yes, thats my initial thought
<jarhar> lwarlow: that would work fine
<jarhar> masonf: +1 to fewer properties is better than more
<jarhar> ntim: or we could remove width and height and set it to stretch or something. i dont have a strong opinion. width height stretch or padding could work, then they would only need to override padding and not width and height
<jarhar> lwarlow: padding on the parent element is what i had originally
<jarhar> ntim: i dont have a strong opinion
<jarhar> masonf: width and height is very easy to understand
<jarhar> ntim: you need to set two properties to the same value right, so i dont know
<jarhar> ntim: ive rarely seen a checkmark with two different sizes
<jarhar> ntim: i could go either way
<jarhar> lwarlow: we can resolve to do padding on the radio for now and revisit if we decide theres a better way
<jarhar> ntim: with size shorthand maybe width and height is ok, but no browser has implemented this yet
<jarhar> astearns: sounds like we want to do something simple here. shall we go with padding for now?
<jarhar> ntim: and width and height to stretch
<jarhar> lwarlow: isnt width and height 100% already?
<jarhar> ntim: i dont know if that will work if you add padding. will it be 100% including the padding?
<jarhar> lwarlow: the padding would be added to the radio, and then checkmark should fill the content box of the parent container
<jarhar> lwarlow: i did it in chrome and it seemed to work
<jarhar> fantasai: padding of the container will affect the child. it wont let you do negative margins, which might be a thing people want to do on checkmarks
<jarhar> fantasai: stretch would solve that more directly
<jarhar> lwarlow: i can take a look at that then
<jarhar> lwarlow: maybe we just resolve to investigate and add other styles as appropriate
<jarhar> lwarlow: resolve to add styles that are the most appropriate, which we can figure out by prototyping
<masonf> +1
<jarhar> proposed resolution: prototype a solution for this issue
<lwarlow> +1
<dbaron> +1
<jarhar> RESOLVED: prototype a solution for this issue