andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippet explanations

Browse Source
This commit is contained in:
Chalarangelo
2021-10-13 21:18:48 +03:00
parent ee00c20cc3
commit e31747599b
15 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/input-with-prefix.md
View File

@ -2,13 +2,13 @@
title: Input with prefix
tags: interactivity,visual,intermediate
firstSeen: 2020-10-14T14:16:57+03:00
lastUpdated: 2020-12-30T15:37:37+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
---
Creates an input with a visual, non-editable prefix.
- Use `display: flex` to create a container element.
- Remove the border and outline from the `<input>` field and apply them to the parent element instead to make it look like an input box.
- Remove the border and outline from the `<input>` field. Apply them to the parent element instead to make it look like an input box.
- Use the `:focus-within` pseudo-class selector to style the parent element accordingly, when the user interacts with the `<input>` field.
```html