Placing the text in a span directly after the input will allow us to select it in CSS. This structure allows clicking on the label text to select the radio without needing for or unique id attributes (Note it's important the name is the same for at least 2 or more radio buttons. Let's set up our radio button as a child of its label element with a sibling of a span of the label text: I am a radio button I am another radio button Radial-gradient - used in background to fill in the radio button in the classic "half-full" style Text-align / vertical-align - used for adjusting the position of our radio button to its labelīorder styles - How we'll form and color the radio button Width / height - does what you think: sets width and height of the element Universal selector * - selects anything/everythingĬhild combinator > - combines two selectors narrowing the selection on the right-hand side to only those elements that are direct descendants of elements selected by the left-hand side.Īdjacent sibling combinator + - combines two selectors narrowing the selection on the right-hand side to only those elements that are the siblings immediately after the elements on the left-hand sideĬontent - used in the ::before psuedo-element to set its contentĭisplay - specifically none to hide elements and inline-block to make our otherwise inline radio button able to have a consistent width and height Psuedo-element ::before - styleable element that doesn't actually exist in the DOM considered the first child of the selected element Psuedo-class :checked - selects checkbox/radio input types or options in a select that are selected/checked/on/active To change the color of the highlighted-text, simply target the ::selection selector and then define the color of the background property. input will select all nodes)Īttribute selector - selects an element with attribute where its value is exactly value I thought it may be neat to write up a short article that will walk you through the basics, and then go a bit deeper with CSS variables. Type selector type - selects all elements of the given type (e.g. Show a styled element that looks like a selected radio button when the input is checked.Show a styled element that looks like an empty radio button when the input is unchecked.
0 kommentar(er)
