Passen Sie den Eingabestil an[type='radio']-HTML-Tutorial-php.cn

Bei Formularen ist der Eingabestil[type="radio"] immer nicht so benutzerfreundlich und verhält sich in verschiedenen Browsern unterschiedlich.

Um ihre Unterschiede optimal zur Geltung zu bringen und für ein gutes Aussehen, werden zunächst einige Stile definiert:

<span style="color: #000000;">html:
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sex"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>女<span style="color: #0000ff;"></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>男<span style="color: #0000ff;"></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

<span style="color: #800000;">css:
body </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">
input </span>{<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">
.female, .male </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 40px</span>;
}<span style="color: #800000;">
.sex label </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}<span style="color: #800000;">
.sex input </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}

Nach dem Login kopieren

Wenn Sie es dann in jedem Browser beobachten, werden Sie feststellen, dass es große Unterschiede gibt:

dh:

Kante:

Oper:

Chrom:

Firefox:

Für den Firefox-Browser gibt es immer noch keine Auswirkung, selbst wenn Breite und Höhe festgelegt sind. Der Eingabekreis[type="radio"] ist immer noch so groß wie im Ausgangszustand. Die Leistung anderer Browser ist ebenfalls inkonsistent. Um konsistente Effekte zu erzielen, müssen wir eine Kompatibilitätsverarbeitung durchführen.

Dinge:

1. Eingabe[type="radio"] ausblenden und opacity: 0 darauf setzen, wir können auf das ursprüngliche Ereignis reagieren.

2. Passen Sie einen Kreis an und platzieren Sie ihn auf der unteren Ebene, um den ursprünglichen ähnlichen Stil zu simulieren

3. Verwenden Sie js, um die ursprüngliche Hintergrundfarbe des benutzerdefinierten Elements darunter zu ändern, wenn input[type="radio"] ausgewählt ist.

Code:

<span style="color: #000000;">html:
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sex"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>女<span style="color: #0000ff;"></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="female-custom"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">> <!-- 同下面的 span 一样作为自定义的元素 --></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>男<span style="color: #0000ff;"></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="male-custom"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>    
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

<span style="color: #800000;">css:
body </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">
input </span>{<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">
.female, .male </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>; /* 设置为相对定位，以便让子元素能绝对定位 */<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 40px</span>;
}<span style="color: #800000;">
.sex label </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}<span style="color: #800000;">
.sex input </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>; /* 这里及以上的定位，可以让该元素竖直居中。(top: 0; bottom: 0;) */<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}<span style="color: #800000;">
.sex span </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}<span style="color: #800000;">        
.sex span.active </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #000</span>;            
}

Nach dem Login kopieren

<span style="color: #000000;">js:
$(</span>"#male").click( <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
    $(</span><span style="color: #0000ff;">this</span>).siblings("span").addClass("active"<span style="color: #000000;">);
    $(</span><span style="color: #0000ff;">this</span>).parents("div").siblings("div").children("span").removeClass("active"<span style="color: #000000;">);
});
$(</span>"#female").click( <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
    $(</span><span style="color: #0000ff;">this</span>).siblings("span").addClass("active"<span style="color: #000000;">);
    $(</span><span style="color: #0000ff;">this</span>).parents("div").siblings("div").children("span").removeClass("active"<span style="color: #000000;">);
});</span>

Nach dem Login kopieren

Nach der Verarbeitung auf diese Weise sind die Anzeigeeffekte im Browser alle gleich:

Erweiterung:

Für die Positionierung im Code verwenden Sie position: absolute; left: 0; Das untergeordnete Element kann dadurch erreicht werden, dass das untergeordnete Element relativ zum übergeordneten Element zentriert angezeigt wird (horizontale Zentrierung und vertikale Zentrierung werden erfüllt). Wenn Sie es nur vertikal zentrieren müssen, müssen Sie die Stile right: 0; und left: 0; nicht hinzufügen.

2. Wenn es für uns nicht einfach ist, die Höhe eines untergeordneten Elements zu bestimmen, können wir sie wie folgt festlegen: Position für das übergeordnete Element: relativ; Position für das untergeordnete Element: absolut; : 10px; margin: auto; Auf diese Weise entspricht die Höhe des untergeordneten Elements der Höhe des übergeordneten Elements minus 20px, wodurch es skalierbarer wird.

Optimierungsupdate:

Anforderungen:

1. Manchmal benötigen wir Inline-Radioauswahlstile

2. Der kleine Kreis innerhalb der ausgewählten Schaltfläche muss nicht den gesamten äußeren Kreis einnehmen.

Dinge:

1. Lassen Sie jedes ausgewählte Paket nach links schweben

2. Fügen Sie dem übergeordneten Element einen kreisförmigen Außenrand hinzu und legen Sie für das untergeordnete Element einen Hintergrund fest, der etwas kleiner als die Größe des übergeordneten Elements ist.

Code:

<span style="color: #000000;">html:
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="fruit"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="apple"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="apple"</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="fruit"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="apple"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="user-defined"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="banana"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="banana"</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="fruit"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="banana"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="user-defined"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="orange"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="orange"</span><span style="color: #0000ff;">></span>橘子<span style="color: #0000ff;"></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="fruit"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="orange"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="user-defined"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

<span style="color: #800000;">css:
* </span>{<span style="color: #ff0000;"> box-sizing</span>:<span style="color: #0000ff;"> border-box</span>; }<span style="color: #800000;">

body </span>{<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 50px</span>; }<span style="color: #800000;">

input </span>{<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

.fruit:before </span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> ""</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> table</span>; }<span style="color: #800000;">

.fruit:after </span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> ""</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }<span style="color: #800000;">

.fruit > div </span>{<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;"> margin-right</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 40px</span>; }<span style="color: #800000;">

.fruit > div:last-child </span>{<span style="color: #ff0000;"> margin-right</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

.fruit label </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> pointer</span>; }<span style="color: #800000;">

.fruit input </span>{<span style="color: #ff0000;"> z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;"> top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> pointer</span>; }<span style="color: #800000;">

.fruit .user-defined </span>{<span style="color: #ff0000;"> z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;"> top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> pointer</span>; }<span style="color: #800000;">

.fruit .user-defined span.circle  </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;"> margin-top</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;"> margin-left</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50%</span>; }<span style="color: #800000;">

.fruit .user-defined span.active  </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #000</span>; }

Nach dem Login kopieren

<span style="color: #000000;">js:
$(</span>"input").click(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
    $(</span><span style="color: #0000ff;">this</span>).siblings("div").children("span").addClass("active"<span style="color: #000000;">);
    $(</span><span style="color: #0000ff;">this</span>).parents("div").siblings("div").find("span").removeClass("active"<span style="color: #000000;">);
});</span>

Nach dem Login kopieren

Die Wirkung zeigt sich wie folgt: