Beispiel:CSS2 cursor.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>