Skip to content

Commit 076235c

Browse files
seungyeubseungyeub
committed
feat: Add new input styling "Simple Input Text Box"
1 parent 5d5682a commit 076235c

File tree

6 files changed

+109
-0
lines changed

6 files changed

+109
-0
lines changed

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,12 @@ There will be continuous updates in the future. Thank you!
160160
<img src="static/image/html5.png" width="20px">
161161
<img src="static/image/css3.png" width="20px">
162162

163+
### Input
164+
165+
- [Simple Input Text Box](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/input/simple-input-text-box)
166+
<img src="static/image/html5.png" width="20px">
167+
<img src="static/image/css3.png" width="20px">
168+
163169
### Layout
164170

165171
- [Draggable Grid System with Gridster.js](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/layout/draggable-grid-system-with-gridster)

‎gifs/input/simple-input-text-box.gif

331 KB
Loading

‎input/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Awesome Input Box Styling 😀
2+
3+
- [Simple Input Text Box](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/input/simple-input-text-box)
4+
5+
---
6+
7+
[<img src="../gifs/input/simple-input-text-box.gif" width="100px" height="100px">](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/input/simple-input-text-box)

‎input/simple-input-text-box/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Simple Input Text Box
2+
3+
![Edit [Web] Simple Input Text Box](../../gifs/indicator/simple-input-text-box.gif)

‎input/simple-input-text-box/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Simple Input Text Box</title>
9+
<link rel="shortcut icon" href="../../favicon.ico">
10+
<link rel="stylesheet" type="text/css" href="style.css">
11+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
12+
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
13+
</head>
14+
15+
<body>
16+
<div class="inputWithIcon">
17+
<input type="text" placeholder="Your name">
18+
<i class="fa fa-user fa-lg fa-fw" area-hidden="true"></i>
19+
</div>
20+
21+
<div class="inputWithIcon">
22+
<input type="text" placeholder="Email">
23+
<i class="fa fa-envelope fa-lg fa-fw" area-hidden="true"></i>
24+
</div>
25+
26+
<div class="inputWithIcon">
27+
<input type="text" placeholder="Phone Number">
28+
<i class="fa fa-phone fa-lg fa-fw" area-hidden="true"></i>
29+
</div>
30+
31+
<div class="inputWithIcon inputIconBg">
32+
<input type="text" placeholder="Your name">
33+
<i class="fa fa-user fa-lg fa-fw" area-hidden="true"></i>
34+
</div>
35+
36+
<div class="inputWithIcon inputIconBg">
37+
<input type="text" placeholder="Email">
38+
<i class="fa fa-envelope fa-lg fa-fw" area-hidden="true"></i>
39+
</div>
40+
41+
<div class="inputWithIcon inputIconBg">
42+
<input type="text" placeholder="Phone Number">
43+
<i class="fa fa-phone fa-lg fa-fw" area-hidden="true"></i>
44+
</div>
45+
46+
<input type="text" placeholder="Age">
47+
</body>
48+
49+
</html>

‎input/simple-input-text-box/style.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
input[type="text"] {
2+
width: 100%;
3+
border: 2px solid #aaa;
4+
border-radius: 4px;
5+
margin: 8px 0;
6+
outline: none;
7+
padding: 8px;
8+
box-sizing: border-box;
9+
transition: 0.3s;
10+
}
11+
12+
input[type="text"]:focus {
13+
border-color: dodgerblue;
14+
box-shadow: 0 0 8px 0 dodgerblue;
15+
}
16+
17+
.inputWithIcon input[type="text"] {
18+
padding-left: 40px;
19+
}
20+
.inputWithIcon {
21+
position: relative;
22+
}
23+
.inputWithIcon i {
24+
position: absolute;
25+
left: 0;
26+
top: 8px;
27+
padding: 9px 8px;
28+
color: #aaa;
29+
transition: 0.3s;
30+
}
31+
.inputWithIcon input[type="text"]:focus + i {
32+
color: dodgerblue;
33+
}
34+
35+
.inputWithIcon.inputIconBg i {
36+
background: #aaa;
37+
color: #fff;
38+
padding: 9px 4px;
39+
border-radius: 4px 0 0 4px;
40+
}
41+
.inputWithIcon.inputIconBg input[type="text"]:focus + i {
42+
color: #fff;
43+
background: dodgerblue;
44+
}

0 commit comments

Comments
 (0)