Frage zur Gestaltung von Checkbox und Radio Button

Baloo

allo zusammen,
ich habe folgende frage an euch
wie bekomme ich das so hin?

[ATTACH=CONFIG]13256[/ATTACH]

[ATTACH=CONFIG]13255[/ATTACH]

CSS Anweisung:

.checkbox{
width: 100%;
content:' ';
display:inline-block;
width: 17px;
height:17px;
position: relative;
border: 1px solid #bbb;
background: white;
margin-right: 1em;
box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

.checkbox:hover {
background:#ddd;
box-shadow: inset 0 0 0 2px white;
}

.checkbox:active {
background:#000;
background:black;
box-shadow: inset 0 0 0 2px white;
}

Der Rahmen der Checkbox und der Hover geht, aber aktiv geht noch nicht
und die Checkbox wird wie folgt angezeigt:

kann mir hier bitte jemand helfen :razz:

Vielen Dank

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Kann beide Anhänge nicht sehen. Weiß also nicht was du genau willst.

Würde jetzt eigentlich nach einem Link zur Problemseite fragen, aber das verkneife ich mir mal.

Baloo

ich habe das ganze nun in ein pdf: http://wir-ladies-auch.de/images/checkbox_radio.pdf

SirEctor

Sieht für mich nicht aus wie ein Radio-Button, sondern eher wie eine Checkbox.

Radiobuttons werden durch <input type="radio" …> markiert. Jeder Radiobutton sollte mit dem name-Attribut einen internen Bezeichnernamen erhalten. Alle Radiobuttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen auswählen.

Checkboxen werden durch <input type="checkbox" …> markiert. Jede Checkbox sollte mit dem name-Attribut einen internen Bezeichnernamen erhalten. Wenn Checkboxen eine Gruppe bilden sollen, aus der der Anwender keinen, einen oder mehrere Einträge auswählen kann, müssen für die betroffenen Checkboxen beim name-Attribut den gleichen Wert notiert werden.

Baloo

in der pdf
oben siehst du die checkboxen.
darunter die radio buttons

button jeweils normal, dann als rollover, dann wenn dieser aktiv ist.

ganz unten wird z.b. zeige ich, den checkbutton, der mit der css angezeigt wird.
siehe css anweisung.

nun war meine frage, wie muss ich diese css erweitern, dass das ergebnis der darstellung der checkboxen / radio buttons dem entspricht,
wie ich es als grafikbild in der pdf angezeigt habe.

das ist eigentlich alles...:razz:

SirEctor

Das ist zwar kein spezielles Wordpress-Thema, sondern eher "wie lerne ich CSS", aber versuch es mal so:

HTML

Code

<div class="checkbox">
    <input type="checkbox" value="1" id="checkboxInput" name="" />
    <label for="checkboxInput"></label>
</div>

CSS

Code

input[type=checkbox] {
    visibility: hidden;
}
.checkbox {
    width: 20px;
    height: 20px;
    background: #ddd;
    margin: 0;
  padding:5px;




    border-radius: 0%;
    position: relative;




  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);




}
.checkbox label {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 0px;




    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;




    background: #fff;




    -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
#checkboxInput[type=checkbox]:checked + label {
    background: #333;
}

Alles anzeigen

Daran kannst du dich auch für die Radio-Buttons orientieren, müsstest nur mit dem border-radius spielen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Frage zur Gestaltung von Checkbox und Radio Button

Jetzt mitmachen!