nicht angemeldet
Hallo Ich war so viele Jahre HTML Abstinent das ich nicht mal mehr meinen alten Account hier kenne. Dementsprechend, und da die Zeit nicht stehen bleibt, bin ich mit dem CSS "von heute" überfordert und teils erschlagen.
Meine Quelle: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Gestaltung_mit_CSS#Radio-Buttons_verstecken
Diese Buttons habe ich mit Bildern versehen. Einmal weiß und einmal schwarz. Wenn der Button aktiv ist wechselt die Hintergrundfarbe zu grün. Jetzt müsste ja nur noch die schwarze Grafik erscheinen. Also zb "waage" zu "waageSCHWARZ" ändern. Ist das via CSS zu realisieren?
Ich möchte nur ungern den Umweg via JS gehen, den Button ermitteln, um dann das Element zu ändern.
Und warum ist da ein Rand um der Grafik?
Ja, data:image ist so schon gewollt.
<html>
<head>
<title>Fuddel App</title>
<meta http-equiv="content-type" name="viewport" content="width=device-width, user-scalable=no, charset=utf-8" />
<style type="text/css">
<!--
.toggle-buttons input[type="radio"]{
visibility:hidden;
position: absolute;
}
.toggle-buttons label {
border: 1px solid #333;
border-radius: 0.5em;
align-items: center;
justify-content: center;
display: flex;
background: #001A47; /* blau */
}
.toggle-buttons input:checked + label {
background: #CBFB6A; /* grün */
box-shadow: none;
}
.toggle-buttons img {
width:50px;
height:40px;
background-repeat: no-repeat;
background-position: center center;
}
.waageSCHWARZ {
background-image:url('data:image/gif;base64,R0lGODlhKQAWAOfHAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///yH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAP8ALAAAAAApABYAAAiHAP8JHEiwoMGDAwEAQMiw4T+FBhVKdEixIMSHEiderEgxY8aEEzky9LgwYkiRIEkivLixIsmSLQmyLNnxo0WaMnHGXInz5sGXPX8GzSlUZUObQnkiHXnSJNOdTjHyRMlUIFSpVKNaHXoVJdCkWW8a9RlWbFOiZc1WTUu1a1agcOGKjEvX48GAADs=');
}
.waage {
background-image:url('data:image/gif;base64,R0lGODlhKQAWAIABAP///+MAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAAApABYAAAJcjI+pewAMY3DKWYkTnfbujHVdc4GQ+FSlSaLM9mVoGiNwGo4abvP1y9stZsFhsWd0RXRGIPO0UkF/Ug6QBTVQrdiq9rhlEZvdnVJYNkeRaXW2jQ13iXS6qY4XLQoAOw==');
}
.lkwSCHWARZ {
background-image:url('data:image/gif;base64,R0lGODlhKQAWAIQTAIWFhVdXV3Z2dtzc3EdHR2ZmZjc3N+bm5tXV1cPDwyYmJszMzKWlpZubmxMTE7q6upKSkrCwsAAAAP///////////////////////////////////////////////////yH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAB8ALAAAAAApABYAAAVz4CeOZGmeqCmtbJuqb9nOUjyytriqdf7htp2s5wO+hCRkUXkiJp1L6LMpzRmHVB+vytRVo1taV/tjil3k7fPMbrvL7ri8HRbz6uj82avU0+A4bIBCf3ZlXoMuhD2LP4OIh0eMk5Aof5J+V1RjYWtfaaAiIQA7');
}
.lkw {
background-image:url('data:image/gif;base64,R0lGODlhKQAWAIQSAIWFhVdXV3Z2dtzc3EdHR2ZmZjc3N+bm5tXV1cPDwyYmJszMzKWlpZubmxMTE7q6upKSkrCwsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAB8ALAAAAAApABYAAAVz4CeOZGmeqHmsbJuqb9nORzyytriqdf7htp2s5wO+hCRkUXkiJp1L6LMpzRmHVB+vytRVo1taV/tjil3k7fPMbrvL7ri8HRbz6uj82avU0+A4bIBCf3ZlXoMuhD2LP4OIh0eMk5Aof5J+V1RjYWtfaaAiIQA7');
}
.editSCHWARZ {
background-image:url('data:image/gif;base64,R0lGODlhKgAWAOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAP8ALAAAAAAqABYAAAiMAP8JHEiwIEEACAEYXMiw4cKECR1KlIhQYMV/Fy9O3AgxIsaOCjdSrKhxIMmSIg2ibLgy5cGQJmFalOlSJUyQMWs+1OjR40eaLiHmHPoTqEiUJZEa5UgzadOlE4XOfBmz5VGnUmdCTYlVplWdX4nqpMp0bMGIK09u5YqzqE+zZDOGDAvX7dq6L+kyDAgAOw==');
}
.edit {
background-image:url('data:image/gif;base64,R0lGODlhKgAWAIABAP///+MAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAAAqABYAAAJgjI+JwKAP42tNWstMDnvfT1Vc6HxY5h1oaips9LZLqdKaLbs0WeeTJxKNcDJK7zgkmlgpphKEa0afF+NtVostpdYbtcW1aX1jpA8LPScqr9UXzEsK1ehOqUyXv/MzPKQAADs=');
}
-->
</style>
</body>
<div class="toggle-buttons">
<input type="radio" id="modus1" name="group-b">
<label for="modus1"><img class="waage"></label>
<input type="radio" id="modus2" name="group-b">
<label for="modus2"><img class="lkw"></label>
<input type="radio" id="modus3" name="group-b">
<label for="modus3"><img class="edit"></label>
</div>
</html>
Gunnar Bittersmann
Der Martin
Tabellenkalk
JürgenB
Rolf B
Matthias Scharwies