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

Revamp snippet descriptions

Browse Source
This commit is contained in:
Chalarangelo
2020-12-30 15:37:37 +02:00
parent 27bae0477f
commit 16a4e06e85
59 changed files with 341 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,13 @@ tags: interactivity,visual,intermediate
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.
- Use the `:focus-within` selector to style the parent element accordingly, when the user interacts with the `input` field.
- 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.
- Use the `:focus-within` pseudo-class selector to style the parent element accordingly, when the user interacts with the `<input>` field.
```html
<div class="input-box">
<span class="prefix">+30</span>
<input type="tel" placeholder="210 123 4567"/>
<input type="tel" placeholder="210 123 4567"/>
</div>
```
@ -20,7 +20,8 @@ Creates an input with a visual, non-editable prefix.
.input-box {
display: flex;
align-items: center;
max-width: 300px;
max-width: 300px;
background: #fff;
border: 1px solid #a0a0a0;
border-radius: 4px;
padding-left: 0.5rem;
@ -37,10 +38,11 @@ Creates an input with a visual, non-editable prefix.
.input-box input {
flex-grow: 1;
font-size: 14px;
background: #fff;
border: none;
outline: none;
padding: 0.5rem;
}
}
.input-box:focus-within {
border-color: #777;