Beispiel:CSS2 cursor.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Mauscursor mit Grafikdatei</title>
<style>
#ja {
cursor: url("https://wiki.selfhtml.org/mediawiki/images/2/29/Tick.png"),
url("https://wiki.selfhtml.org/mediawiki/images/e/ed/Tick.gif"),
url("https://wiki.selfhtml.org/mediawiki/images/1/14/Tick.cur"),
auto;
}
#nein {
cursor: url("https://wiki.selfhtml.org/mediawiki/images/4/4e/Cross.png"),
url("https://wiki.selfhtml.org/mediawiki/images/c/c8/Cross.gif"),
url("https://wiki.selfhtml.org/mediawiki/images/9/9e/Cross.cur"),
auto;
}
#b1, [for=b1] {
cursor: url("https://upload.wikimedia.org/wikipedia/commons/5/5e/Smiley_icon.svg"),auto;
}
#b2, [for=b2] {
cursor: url("https://upload.wikimedia.org/wikipedia/commons/8/83/Plain_smiley_yellow_simple.svg"),auto;
}
#b3, [for=b3] {
cursor: url("https://upload.wikimedia.org/wikipedia/commons/4/42/Sad_smiley_yellow_simple.svg"),auto;
}
button {
padding: 0.5em;
}
.toggle-buttons input[type="radio"] {
visibility: hidden;
}
.toggle-buttons label {
border: thin solid #333;
border-radius: 0.5em;
padding: 0.5em;
}
.toggle-buttons input:checked + label {
background: #ebf5d7;
color: #5a9900;
box-shadow: none;
}
input:hover + label,
input:focus + label {
background: #ffebe6;
}
</style>
</head>
<body>
<h1>Beispiel für eigene Mauscursor</h1>
<p>Ich stimme den AGB zu.</p>
<button id="ja">Ja</button>
<button id="nein">Nein</button>
<h2>Wie geht es Ihnen?</h2>
<div class="toggle-buttons">
<input type="radio" id="b1" name="group-b" />
<label for="b1">Super!</label>
<input type="radio" id="b2" name="group-b" />
<label for="b2">Geht so!</label>
<input type="radio" id="b3" name="group-b" />
<label for="b3">Mies!</label>
</div>
</body>
</html>