1<label for="customInput" class="custom-label">Input Label</label>
2<div class="input-container">
3  <input
4    id="customInput"
5    type="text"
6    class="custom-input"
7    placeholder="Enter text here"
8    
9    
10    
11    maxlength="100"
12    
13    
14    
15    
16    
17    
18  />
19</div>

1
2.custom-input {
3  width: 200px;
4  height: 40px;
5  border-radius: 4px;
6  border: 1px solid #cccccc;
7  background-color: #ffffff;
8  color: #000000;
9  font-size: 16px;
10  padding: 8px;
11  
12}
13
14.custom-input:focus {
15  border-color: #3b82f6;
16  background-color: #ffffff;
17  color: #000000;
18  outline: none;
19}
20
21.custom-input:hover {
22  border-color: #999999;
23  background-color: #f9fafb;
24}
25
26.custom-input.error {
27  border-color: #ef4444;
28  background-color: #fef2f2;
29  color: #ef4444;
30}
31
32.error-message {
33  color: #ef4444;
34  font-size: 14px;
35  margin-top: 5px;
36}
37
38
39
40.input-container {
41  position: relative;
42  display: inline-block;
43}
44
45.input-icon {
46  position: absolute;
47  top: 50%;
48  left: 10px;
49  transform: translateY(-50%);
50  color: #000000;
51}
52
53.custom-label {
54  display: block;
55  margin-bottom: 5px;
56  font-weight: bold;
57}
58