Custom Form Elements

display: inline-block

Besides block, inline, and flex, there is one more value — inline-block. It combines the behavior of inline and block elements.

What comes from where?

Centering a button

.form-row:last-child {
text-align: center;  /* the button inside becomes centered */
}

The gap between inline-block elements

A gap (~4px) appears between inline-block elements. It is not “created” — it comes from the line-break character or space in your HTML code.

How does it appear?

<!-- There is a line break between these divs → the browser shows 1 space -->
<div class="card">...</div>
<div class="card">...</div>

How to remove it?

Dropdown list: <select> + <option>

<select> is a form element for choosing one option from a list. <option> is each choice (it can only appear inside <select>).

<label>
<span class="form-hint">Choose a city</span>
<select class="select" name="city">
<option>Kyiv</option>
<option selected>Lviv</option>
<option>Odesa</option>
<option>Kharkiv</option>
</select>
</label>

When to use select vs. radio?

appearance: none — resetting the styling

Browsers have their own styling for form elements (<select>, some <input> types) that is hard to override. The appearance property with the value none disables this default styling.

.select {
-webkit-appearance: none;  /* Safari, old Chrome */
-moz-appearance: none;     /* Firefox */
appearance: none;          /* standard */
}

Where to apply it?

• <select> — removes the default arrow, allows full styling
• input[type="search"] — removes the non-standard styling in Safari

background — the element’s background

A group of properties for controlling the background: color, image, repetition, position, size.

background-color

Sets the background color. It is recommended to always place a color under the background-image — in case the picture fails to load.

background-image

background-image: url("icons/arrow.svg");

Loads an image and shows it as the element’s background. Without extra settings, it repeats and fills the whole block.

background-repeat

background-position

Defines the position of the background image. Two values: horizontal and vertical.

/* 9 anchor points */
background-position: left top;       /* top-left corner */
background-position: center center;  /* strictly centered */
background-position: right center;   /* right, vertically centered */
/* With an offset from the anchor point */
background-position: right 10px center;  /* right, -10px to the left */

background-size

Styling <select>: a full example

After resetting with appearance: none, the <select> element becomes an ordinary rectangle. Now we add our own arrow via background-image:

.select {
display: block;
width: 100%;
padding: 10px 35px 10px 15px;  /* more padding-right for the arrow */
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
font-family: inherit;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("icons/arrow-down.svg");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px auto;
}

Radio buttons: input type=”radio”

Radio buttons let you choose one option from a group. The name “radio” comes from old radio receivers: you press one button and another pops out.

<label>
<input type="radio" name="gender" class="radio">
<span class="radio-text">Male</span>
</label>
<label>
<input type="radio" name="gender" class="radio">
<span class="radio-text">Female</span>
</label>

The name attribute — creating a radio group

Without name, each radio button works independently — you can select them all at once. The name attribute binds radio buttons into a group: only one in the group is selected.

Pseudo-elements ::before and ::after (practice)

Pseudo-elements let you add virtual blocks to any element — without changing the HTML code. They are created exclusively through CSS.

The required content property

.heading::before {
content: "";  /* required! without content, the element won't appear */
display: block;
width: 60px;
height: 4px;
background-color: #4caf50;
margin-bottom: 10px;
}

Limitations

Pseudo-elements do not work on these tags:

• <input> — self-closing, no content
• <textarea>
• <select>
• <img> — self-closing

Layer priority

::before appears before the content and has lower priority (the content overlaps it). ::after appears after the content and has higher priority (it can overlap the content).

vertical-align — vertical alignment

Works for inline and inline-block elements. Defines how the element aligns relative to the line.

The + (adjacent) and ~ (general sibling) selectors

These selectors work between “siblings” — elements at the same nesting level (one parent). They are the analog of the > (child) and space (descendant) selectors, but horizontal.

The + (adjacent) selector

Styles an element if its immediate older sibling matches the condition:

/* Style .radio-text if it is immediately preceded by .form-hint */
.form-hint + .radio-text {
color: red;
}

The ~ (general sibling) selector

Styles an element if any of its older siblings matches the condition:

/* Style .radio-text if there is a .form-hint somewhere earlier in the code */
.form-hint ~ .radio-text {
color: red;
}

Comparison of all four “horizontal-vertical” selectors

Custom styling of radio buttons

Standard radio buttons cannot be styled: browsers don’t allow changing their color, size, or shape. The solution is to create a mock and hide the original.

Step 1: create a mock via ::before

Since <input> doesn’t support pseudo-elements, we create them on the neighboring <span>:

.radio-text::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
vertical-align: middle;
background-image: url("icons/radio.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

Step 2: pass the :checked state via the ~ selector

/* If the radio button is selected → swap the picture on the mock */
.radio:checked ~ .radio-text::before {
background-image: url("icons/radio-active.svg");
}

Step 3: hide the original accessibly

.radio {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
}

Step 4: the focus state

/* Focus from the radio button → visual highlight of the text */
.radio:focus ~ .radio-text {
outline: 2px solid #1976d2;
outline-offset: 2px;
}

position: absolute — briefly

position: absolute pulls an element out of the normal document flow and places it on a separate “layer”:

• Other elements behave as if the absolute element doesn’t exist
• Width and height are calculated from the content (as in inline-block)
• You can set width and height — they will work
• The parent element doesn’t account for the height of the absolute child

clip-path: inset() — visual clipping

The clip-path property lets you show only part of an element and hide the rest.

/* Clip 50% from each side — the element disappears visually */
clip-path: inset(50%);
/* Clip into a circle shape */
clip-path: circle(50%);
/* Clip into a polygon shape */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Checkbox: input type=”checkbox”

A checkbox is a “yes/no” element: to agree or not agree. Essentially, it is two radio buttons in a single element.

<label>
<input type="checkbox" name="consent" class="checkbox" required>
<span class="checkbox-text">I agree to the processing of personal data</span>
</label>

The styling is absolutely identical to radio buttons:

1. Create a mock via ::before on .checkbox-text
2. Pass the :checked state via .checkbox:checked ~ .checkbox-text::before
3. Hide the original via position: absolute + clip
4. Add the :focus state

/* Hide together with radio — separated by a comma */
.radio,
.checkbox {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
}

A modern alternative: accent-color

In file 06 we already mentioned accent-color — a property that lets you change the color of standard checkbox, radio, and range elements without custom styling:

input[type="radio"],
input[type="checkbox"] {
accent-color: #e53935;
}

Summary