Skip to content

Commit c1fc3d4

Browse files
chefmatthaus-hubchefmatthaus-hub
committed
added additional hover .css to select
1 parent daa9c1f commit c1fc3d4

1 file changed

Lines changed: 59 additions & 51 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 59 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,20 @@
2323
transition: 0.4s;
2424
}
2525

26+
select:hover,
27+
select:focus{
28+
background: rgb(117, 180, 232);
29+
color: white;
30+
}
31+
2632
button {
2733
padding: 5px;
28-
font: bold 0.6em sans-serif;
29-
border: 2px solid #333;
34+
border: 2px solid #ddd;
35+
background: #eee;
3036
border-radius: 5px;
3137
cursor: pointer;
3238
}
3339

34-
button::after {
35-
content: ">>>";
36-
}
37-
3840
button:hover,
3941
button:focus {
4042
background: rgb(117, 180, 232);
@@ -53,59 +55,65 @@ <h1>Product Pick</h1>
5355

5456
<form>
5557

56-
<fieldset>
57-
58-
<legend>Your Details</legend>
59-
60-
<p>
61-
<div>
62-
<label for="name">Name: <input type="text" name="name" id="name" placeholder="John Smith" required></label>
63-
</div>
64-
</p>
65-
<p>
66-
<div>
67-
<label for="email">Email: <input type="text" name="email" id="email" placeholder="example@email.com" required></label>
68-
</p>
69-
70-
</fieldset>
71-
72-
<fieldset>
73-
74-
<legend>Shirt Colour Options</legend>
75-
76-
<p>
77-
<div>
78-
<input type="radio" name="color" id="colour_1">
79-
<label for="colour_1">Red</label>
80-
</div>
81-
<div>
82-
<input type="radio" name="color" id="colour_2">
83-
<label for="colour_2">Blue</label>
84-
</div>
85-
<div>
86-
<input type="radio" name="color" id="colour_3">
87-
<label for="colour_3">Green</label>
88-
</div>
89-
</p>
90-
91-
</fieldset>
92-
93-
<fieldset>
94-
95-
<legend>Shirt Size Options</legend>
96-
<p>
97-
98-
<select name="size" id="size">
58+
<p>
59+
<fieldset>
60+
61+
<legend>Your Details</legend>
62+
63+
<p>
64+
<div>
65+
<label for="name">Name: <input type="text" name="name" id="name" placeholder="John Smith" required></label>
66+
</div>
67+
</p>
68+
<p>
69+
<div>
70+
<label for="email">Email: <input type="text" name="email" id="email" placeholder="example@email.com" required></label>
71+
</p>
72+
73+
</fieldset>
74+
</p>
75+
76+
<p>
77+
<fieldset>
78+
79+
<legend>Shirt Colour Options</legend>
80+
81+
<p>
82+
<div>
83+
<input type="radio" name="color" id="colour_1">
84+
<label for="colour_1">Red</label>
85+
</div>
86+
<div>
87+
<input type="radio" name="color" id="colour_2">
88+
<label for="colour_2">Blue</label>
89+
</div>
90+
<div>
91+
<input type="radio" name="color" id="colour_3">
92+
<label for="colour_3">Green</label>
93+
</div>
94+
</p>
95+
96+
</fieldset>
97+
</p>
98+
99+
<p>
100+
<fieldset>
101+
102+
<legend>Shirt Size Options</legend>
103+
104+
<p>
105+
<select name="size" id="size" required>
99106
<option value="xs">Extra Small</option>
100107
<option value="s">Small</option>
101108
<option value="m">Medium</option>
102109
<option value="l">Large</option>
103110
<option value="xl">Extra Large</option>
104111
<option value="xll">Extra Extra Large</option>
105112
</select>
106-
</p>
113+
</p>
107114

108-
</fieldset>
115+
</fieldset>
116+
</p>
109117

110118
<div>
111119
<p>

0 commit comments

Comments
 (0)