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

Update input-with-prefix.md

Browse Source
This commit is contained in:
Angelos Chalaris
2020-11-15 16:49:51 +02:00
committed by GitHub
parent 37df5cc5a8
commit 97f23395b7
1 changed files with 13 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,18 @@
--- ---
title: Input with Prefix title: Input with prefix
tags: visual,interactivity,intermediate tags: interactivity,visual,intermediate
--- ---
Creates an input with a visual, non-editable prefix. Creates an input with a visual, non-editable prefix.
- Create a parent element, containing the prefix and the input - Use `display: flex` to create a container element.
- Remove border and outline from the input, and apply it to the parent element, to give it the appearance of an input box - 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 `:focus-within` selector to change the parent element style accordingly - Use the `:focus-within` selector to style the parent element accordingly, when the user interacts with the `input` field.
```html ```html
<div class="input-box"> <div class="input-box">
<span class="prefix">R$</span> <span class="prefix">+30</span>
<input /> <input type="tel" placeholder="210 123 4567"/>
</div> </div>
``` ```
@ -20,40 +20,29 @@ Creates an input with a visual, non-editable prefix.
.input-box { .input-box {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 300px; max-width: 300px;
border: 1px #A0AEC0 solid; border: 1px solid #a0a0a0;
border-radius: 4px; border-radius: 4px;
padding-left: 0.5rem; padding-left: 0.5rem;
overflow: hidden; overflow: hidden;
font-family: sans-serif; font-family: sans-serif;
transition: border-color 0.5s ease;
}
.input-box:focus-within, .input-box:hover {
border-color: #38B2AC;
} }
.input-box .prefix { .input-box .prefix {
font-weight: 300; font-weight: 300;
font-size: 14px; font-size: 14px;
color: #A0AEC0; color: #999;
} }
.input-box:focus-within .prefix, .input-box:hover .prefix {
color: #38B2AC;
}
.input-box input { .input-box input {
flex-grow: 1; flex-grow: 1;
font-size: 14px;
border: none; border: none;
outline: none; outline: none;
padding: 0.5rem; padding: 0.5rem;
} }
.input-box:focus-within {
border-color: #777;
}
``` ```