63 lines
1.2 KiB
CSS
63 lines
1.2 KiB
CSS
|
body {
|
||
|
|
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||
|
|
text-shadow: 2px 2px 4px silver;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form {
|
||
|
|
background-color: #f8faff;
|
||
|
|
border: medium solid indigo;
|
||
|
|
max-width: 50ch;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form div {
|
||
|
|
margin: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form label:has(+:is(input, select, textarea)[required])::after {
|
||
|
|
color: red;
|
||
|
|
content: "*";
|
||
|
|
vertical-align: super;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form input[type=checkbox]:not(:checked)+fieldset.conditional {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 0.25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form > div:has(button[type=submit]){
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form button[type=submit]{
|
||
|
|
background-color: slateblue;
|
||
|
|
border: none;
|
||
|
|
border-radius: 0.5em;
|
||
|
|
color: white;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 0.5em 1.5em;
|
||
|
|
transition: background-color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form button[type=submit]:hover{
|
||
|
|
background-color: forestgreen;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form input[type=email]:invalid{
|
||
|
|
background-color: tomato;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.fancy-form :focus{
|
||
|
|
border-color: gold;
|
||
|
|
border-width: thick;
|
||
|
|
outline: none;
|
||
|
|
}
|