diff --git a/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md b/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md index c44a86312fe..bfdded8c68b 100644 --- a/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md +++ b/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md @@ -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.