gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): update focus style instructions and add outline test in job application form lab (#67055)

Browse Source 
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Ayush Kumar Singh
2026-05-11 12:54:32 +05:30
committed by GitHub
parent 0ae076e2d8
commit b316a368c4
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md
+8 -2
View File
@@ -22,7 +22,7 @@ demoType: onClick
1. You should have a `textarea` element with the id `message` for entering a message.
1. You should associate every `input` element with a `label` element.
1. You should have a `button` element with the type `submit` for submitting the form.
1. Add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color when focused.
1. Add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color and remove the default outline when focused.
1. The `input`, `select` and `textarea` elements should have an `:invalid` pseudo-class that changes the border color to red when invalid input is detected.
1. The `input`, `select` and `textarea` elements should have a `:valid` pseudo-class that changes the border color to green when valid input is entered.
1. The `button` element should have a `:hover` pseudo-class that changes the background color when hovered over.
@@ -105,7 +105,13 @@ assert.isNotEmpty(document.querySelectorAll("div.container > form button[type='s
You should add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color when focused. Use a list selector in the given order.
```js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input:focus, textarea:focus').getPropertyValue('border-color'))
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input:focus, textarea:focus').getPropertyValue('border-color'));
```
You should use the selector for the `:focus` pseudo-class for `input` and `textarea` to also remove the default outline when focused.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('input:focus, textarea:focus').getPropertyValue('outline'), 'none');
```
The `input`, `select` and `textarea` elements should have an `:invalid` pseudo-class that changes the border color to red when invalid input is detected. Use a list selector in the given order.