0
Ich verwende iCheck um meine Check- und Radioboxen zu stylen. Ich möchte den Hintergrund der Radiobox weiß machen. Zur Zeit seiner transparenten und sieht wie folgt aus:iCheck Radiobox mit weißem Hintergrund
Ich dachte, es wäre eine gute Idee sein, die blue.png Bild bearbeiten
und den Hintergrund von transparent bis weiß ändern . Aber jetzt ist die Radiobox nicht mehr rund. Dies ist, wie es jetzt aussieht:
Gibt es eine einfachere/bessere Möglichkeit, den Hintergrund zu Weiß zu ändern? Muss ich wirklich blue.png bearbeiten?
Hier ist der Code, um das Bild zu erzeugen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="/resources/vendor/icheck-1.x/skins/square/blue.css">
<style>
span{
margin-left: 10px;
color:#FFF;
}
label{
background-color: #08C;
border-radius:20px;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<label for='name' >
<input type="radio" name='name' id='name'><span>Select this name</span>
</label>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script>
<script src='/resources/vendor/icheck-1.x/icheck.js'></script>
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-white',
increaseArea: '20%', // optional
});
});
</script>
</html>
bearbeiten Hier ist die
blue.png modifiziert ist, kann Sie here das unkomprimierte Bild herunterladen.
Haben Sie eine Live-Demo irgendwo haben? – Frutis
@Frutis Leider verwende ich XAMPP auf meinem lokalen Desktop. Ich kann kein jFiddle einrichten, weil ich nicht weiß, wie die icheck-Abhängigkeiten importiert werden. – Adam
Können Sie Ihre modifizierte blue.png hochladen und zur Frage hinzufügen? –