CSS- UI Element States Pseudo-Classes

Developer
Anthony Albertorio
Size
2,206 Kb
Views
16,192
  1. CSS- UI Element States Pseudo-Classes Previews
  2. CSS- UI Element States Pseudo-Classes HTML Codes
  3. CSS- UI Element States Pseudo-Classes CSS Codes

How do I make an css- ui element states pseudo-classes?

CSS- UI Element States Pseudo-Classes covered::enabled :disabled :checked. What is a css- ui element states pseudo-classes? How do you make a css- ui element states pseudo-classes? This script and codes were developed by Anthony Albertorio on 24 September 2022, Saturday.

CSS- UI Element States Pseudo-Classes Previews
IQ Test

CSS- UI Element States Pseudo-Classes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS- UI Element States Pseudo-Classes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form> <input type="text" name="name" placeholder="name" /> <input type="text" name="email" placeholder="email" disabled/> <div> <input name="radio" id="radio1" type="radio" /><label for="radio1">Option 1</label> <input name="radio" id="radio2" type="radio" /><label for="radio2">Option 2</label> <input name="radio" id="radio3" type="radio" /><label for="radio3">Option 3</label> </div> <input type="submit" name="submit" />
</form>
</body>
</html>

CSS- UI Element States Pseudo-Classes - Script Codes CSS Codes

/* UI state pseudo classes, let us state CSS based on certain use interaction states.
They are most commonly used for styling form elements.
*/
/*General Styling*/
body { background-color: #e8f3f8; font: 1em/1.5 sans-serif;
}
form { margin: 80px auto; width: 320px; color: steelblue;
}
input { padding: 10px; border-radius: 5px; font-size: inherit;
}
input[type="text"] { display: block; margin-bottom: 25px; width: 100%; border: 2px solid steelblue;
}
input[type="radio"] { margin: 0 8px 25px 18px;
}
input[type="radio"]:first-child{ margin-left: 20px;
}
input[type="submit"] { width: 344px; height: 45px; border: none; background: steelblue; color: white; cursor: pointer;
}
/* UI Element States Pseudo Classes*/
/* :enabled - selects UI elements that are in an enabled state, such as a button or a text field. When a form element is enabled, it can become active and gain focus.*/
/*Targeting text boxes.*/
input[type="text"]:enabled {	background: lightyellow;
}
/* :disabled{} selects form elements like button and fields that are in a disabled state.*/
:disabled { background: #ddd;
}
/*:checked{}, targets elements that are selected or checked, like radio or checkboxes
In this example we use the (+) adjected sibling combinator to select label that is an immediate sibling of the radio button. */
input[type="radio"]:checked + label { font-size: 22px; font-weight: bold;
}
CSS- UI Element States Pseudo-Classes - Script Codes
CSS- UI Element States Pseudo-Classes - Script Codes
Home Page Home
Developer Anthony Albertorio
Username tesla809
Uploaded September 24, 2022
Rating 3
Size 2,206 Kb
Views 16,192
Do you need developer help for CSS- UI Element States Pseudo-Classes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Albertorio (tesla809) Script Codes
Name
Million-token-HomePage-initial-mockup
SAMPLE FORM
FreeCodeCamp-Tribute Page
Weather App
CSS- Relative Length Units
CSS- Additional Pseudo-Classes
CSS Combinators
Random Quote Machine
A Pen by Anthony Albertorio
Tic Tac Toe
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!