-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (153 loc) · 4.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.customInput::-webkit-input-placeholder {
color: blue;
font-weight: 500;
font-size: 25px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
input {
width: 300px;
height: 30px;
}
.caretColor {
caret-color: aqua;
}
.selection-color::selection {
color: red;
background-color: blue;
font-size: 20px;
font-weight: bold;
}
.selection-color {
font-size: 15px;
font-weight: 300;
}
li:not(:last-child) {
color: green;
}
.noArrow::-webkit-inner-spin-button,
.noArrow::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.no-border input {
border: none;
}
.without-scrollbar{
width: 400px;
height: 200px;
overflow-x: scroll;
background-color: brown;
}
.without-scrollbar::-webkit-scrollbar{
display: none;
}
</style>
</head>
<body>
<main>
<h1>Unknown CSS</h1>
<section class="custom-placeholder">
We can style input placeholder with "::-webkit-input-placeholder". This
is very useful trick when you want your inputs to look different.
<input
class="customInput"
type="text"
placeholder="Please enter your name here"
/>
</section>
<section>
<p>In this section you gonna learn how to change the cursor color.</p>
<p>
To change the cursor color we use "caret-color" property in the css
</p>
<input
class="caretColor"
type="text"
placeholder="type 'something' in this input"
/>
</section>
<section>
<p>
To Change the Text selection Color we use ::selection selector to
override the default text selection color.
</p>
<p>Select this paragraph using mouse.</p>
<p class="selection-color">
Now Select this paragraph you may see the difference.
</p>
</section>
<section>
<p>The :not selector</p>
<p>
By using the :not selection we can specify where the style should not
apply.
</p>
<ul>
<li class="list">element1</li>
<li class="list">element2</li>
<li class="list">element3</li>
<li class="list">element4</li>
<li class="list">element5</li>
</ul>
</section>
<section>
<p>
In this section we going to learn how to remove the arrow from the
type number input.
</p>
<p>
We use ::-webkit-outer-spin-button and ::-webkit-inner-spin-button
selector.
</p>
<input
type="number"
placeholder="I am number input without arrows"
max="10"
min="3"
class="noArrow"
maxlength="10"
/>
<input type="number" placeholder="I am number input with arrows" />
</section>
<section class="no-border">
<p>
In this section you are going to learn how to remove the border of
input.
</p>
<p>
for removing the outline of the input we use outline property and the
none value. "border:none"
</p>
<input type="text" placeholder="this input does not have border" />
</section>
<section >
<p>
This box has scroll bar but hidden. We can hide the scroll bar using
the CSS property.
</p>
<p>To hide the Scrollbar we use ::-webkit-scrollbar selector.</p>
<p class="without-scrollbar">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est illo
perferendis, enim dolore nam laborum porro reprehenderit tenetur
itaque, dignissimos, quod cumque eveniet quo. Qui molestias similique
corrupti ut quisquam, magni illo asperiores, dolores porro cumque
culpa natus quasi fugit sapiente! Eius, itaque fugit pariatur repellat
quos aut ipsum. In molestias facilis nulla veniam quaerat officiis,
cupiditate nobis ex praesentium veritatis reiciendis corporis
perferendis vel totam impedit ipsum dicta laboriosam illum, animi
exercitationem? Numquam ad quis dignissimos eius, consequuntur
aspernatur, nobis, possimus fugit commodi itaque molestias
necessitatibus dicta nihil? Consequuntur hic, tenetur distinctio iure
illo repellat. Accusamus maxime corrupti quas.
</p>
</section>
</main>
</body>
</html>