mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-03 20:58:02 +02:00
118 lines
2.2 KiB
Plaintext
118 lines
2.2 KiB
Plaintext
---
|
|
category: Feedback
|
|
created: '2019-12-12'
|
|
description: Add validation icons to input with CSS
|
|
keywords: css validation icon
|
|
thumbnail: /assets/css-layout/thumbnails/validation-icon.png
|
|
title: Validation icon
|
|
---
|
|
|
|
## HTML
|
|
|
|
```html index.html
|
|
<div class="validation-icon">
|
|
<!-- The input -->
|
|
<input class="validation-icon__input" />
|
|
|
|
<!-- The icon validation-icon -->
|
|
<span class="validation-icon__icon">
|
|
<!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
|
|
...
|
|
</span>
|
|
</div>
|
|
```
|
|
|
|
## CSS
|
|
|
|
```css styles.css
|
|
.validation-icon {
|
|
/* Used to position the validation icon */
|
|
position: relative;
|
|
}
|
|
|
|
.validation-icon__input {
|
|
/* Border */
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.25rem;
|
|
|
|
/* Take the full width */
|
|
width: 100%;
|
|
height: 2rem;
|
|
|
|
/* Don't overlap the icon */
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
.validation-icon__icon {
|
|
/* Positioned at the right side */
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
|
|
z-index: 10;
|
|
}
|
|
```
|
|
|
|
<Playground>
|
|
```css styles.css hidden
|
|
body {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.validation-icon {
|
|
/* Used to position the validation icon */
|
|
position: relative;
|
|
|
|
/* Demo */
|
|
width: 16rem;
|
|
}
|
|
|
|
.validation-icon__input {
|
|
/* Border */
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.25rem;
|
|
|
|
/* Take the full width */
|
|
width: 100%;
|
|
height: 2rem;
|
|
|
|
/* Don't overlap the icon */
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
.validation-icon__icon {
|
|
/* Positioned at the right side */
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
|
|
z-index: 10;
|
|
}
|
|
|
|
.validation-icon__svg {
|
|
fill: none;
|
|
height: 1rem;
|
|
width: 1rem;
|
|
stroke: #22c55e;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 2;
|
|
}
|
|
```
|
|
|
|
```html index.html hidden
|
|
<div class="validation-icon">
|
|
<input class="validation-icon__input" />
|
|
<span class="validation-icon__icon">
|
|
<svg class="validation-icon__svg" viewBox="0 0 24 24">
|
|
<path d="M23.5,0.499l-16.5,23l-6.5-6.5"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
```
|
|
</Playground>
|