Skip to content

Commit 96895c8

Browse files
authored
feat(curriculum): adding content for styling forms review page (freeCodeCamp#57049)
1 parent 4292d95 commit 96895c8

File tree

2 files changed

+12
-1
lines changed

2 files changed

+12
-1
lines changed

client/i18n/locales/english/intro.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2019,7 +2019,8 @@
20192019
"review-styling-forms": {
20202020
"title": "Styling Forms Review",
20212021
"intro": [
2022-
"Review the Styling Forms concepts to prepare for the upcoming quiz."
2022+
"Before you are quizzed on styling forms, you first need to review.",
2023+
"Open up this page to review how to style form inputs, working with <code>appearance: none</code> and more."
20232024
]
20242025
},
20252026
"quiz-styling-forms": {

curriculum/challenges/english/25-front-end-development/review-styling-forms/671a915858de057ad84c5dbd.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,17 @@ dashedName: review-styling-forms
99

1010
Review the concepts below to prepare for the upcoming quiz.
1111

12+
## Best Practices for Styling Inputs
1213

14+
- **Styling Inputs**: As with all text elements, you need to ensure the styles you apply to text inputs are accessible. This means the font needs to be adequately sized, and the color needs to have sufficient contrast with the background. Input elements are also focusable. When you are editing your styles, you should take care that you preserve a noticeable indicator when the element has focus, such as a bold border.
15+
16+
## Using `appearance: none` for Inputs
17+
18+
- **`appearance: none`**: Browsers apply default styling to a lot of elements. The `appearance: none` CSS property gives you complete control over the styling, but comes with some caveats. When building custom styles for input elements, you will need to make sure focus and error indicators are still present.
19+
20+
## Commons Issues Styling `datetime-local` and `color` Properties
21+
22+
- **Common Issues**: These special types of inputs rely on complex pseudo-elements to create things like the date and color pickers. This presents a significant challenge for styling these inputs. One challenge is that the default styling is entirely browser-dependent, so the CSS you write to make the picker look the way you intend may be entirely different on another browser.
1323

1424
# --assignment--
1525

0 commit comments

Comments
 (0)