TutorialKart
index.html
►
Run
Reset
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS accent-color Property</title> <style> input[type=checkbox] { accent-color: red; } input[type=radio] { accent-color: green; } input[type=range] { accent-color: rgb(128, 0, 128); } progress { accent-color: hsl(200, 70%, 50%); } </style> </head> <body> <h1>CSS accent-color Property</h1> <h3>Checkbox Example:</h3> <input type="checkbox" id="newsletter" name="newsletter" checked> <label for="newsletter"> Subscribe to newsletter</label><br> <input type="checkbox" id="updates" name="updates" checked> <label for="updates"> Receive updates</label><br><br> <h3>Radio Button Example:</h3> <input type="radio" id="choice1" name="choices" value="option1"> <label for="choice1"> Option 1</label><br> <input type="radio" id="choice2" name="choices" value="option2" checked> <label for="choice2"> Option 2</label><br> <h3>Range Slider Example:</h3> <label for="volume">Adjust volume:</label> <input type="range" id="volume" name="volume" min="0" max="100" value="50"> <h3>Progress Bar Example:</h3> <label for="progress">Upload Progress:</label> <progress id="progress" value="60" max="100"> 60% </progress> </body> </html>
