jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-26 17:02:27 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): add interactive examples to appearance:none; lesson (#63004)

Browse Source
This commit is contained in:
Diem-Trang Pham
2025-10-24 04:19:52 -05:00
committed by GitHub
parent 51af1e6e98
commit bf35ce2a29
1 changed files with 59 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
curriculum/challenges/english/blocks/lecture-best-practices-for-styling-forms/672bc9d9eecb65cdf63491de.md
View File

@@ -5,12 +5,70 @@ challengeType: 19
dashedName: when-should-you-use-appearance-none-to-deal-with-issues-styling-search-inputs-and-checkboxes
---
# --description--
# --interactive--
Let's learn when to use `appearance: none` to address styling issues for search input, checkboxes and radio buttons.
Browsers apply default styling to a lot of elements. In the case of input elements your ability to style them with CSS can feel rather restricted. So, you may want to use `appearance: none` to hide aspects of the default element and build your own instead. For example, this would hide the default checkboxes for a checkbox input allowing you to use custom indicators like a green tick and a red X to show the state. For a search input, WebKit based browsers will show a default search icon and a cancel button. Hiding these allows you to create your own indicators that would appear on all browsers.
Here is an example of a custom checkbox:
**NOTE**: Some of the CSS in this example uses properties that haven't been covered yet. This is just to give you an idea of how to create a custom checkbox. You will learn how all of this works in future lessons and workshops.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css" />
<form>
<label>
Agree <input class="checkbox" type="checkbox" />
</label>
</form>
```
```css
.checkbox {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 4px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 0.25s ease;
vertical-align: middle;
}
.checkbox:hover {
border-color: #888;
}
.checkbox:checked {
background-color: #4caf50;
border-color: #4caf50;
}
.checkbox:checked::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus {
outline: 2px solid #90caf9;
outline-offset: 2px;
}
```
:::
WebKit is a software engine that helps web browsers display websites. Browsers like Safari use WebKit to make sure web pages look and work correctly. This `appearance: none` CSS property gives you complete control over the styling, but it does come with some things to look out for. The default interactive components of input elements include features such as focus and error indicators which you will need to ensure aren't lost.
Creating consistent cross-platform styling is a great reason to use this property. You can also use it to ensure that tap targets on a mobile device are large enough or that the colors of a checkbox have enough contrast.