Styling 2 Elemente auf eine andere Art und Weise

So blieb ich mit diesem Code-Schnipsel stecken. Mein Problem ist, dass das Wort "check" sollte grün sein (und nur wenn es tatsächlich überprüft), aber jetzt das "Kontrollkästchen Label-Element" nimmt den Stil aus dem "Eingabefeld Label-Element". Gibt es eine Möglichkeit, die 2 "Label" -Elemente ("checkbox label" und "input field label") voneinander unabhängig zu machen?Styling 2 Elemente auf eine andere Art und Weise

/*Input Field*/ 
 

 
.field { 
 
    font-family: sans-serif; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-flow: column-reverse; 
 
     flex-flow: column-reverse; 
 
} 
 
label, 
 
input { 
 
    -webkit-transition: all 200ms ease; 
 
    transition: all 200ms ease; 
 
} 
 
input { 
 
    font-size: 24px; 
 
    border: 0; 
 
    border-bottom: 1px solid #ccc; 
 
    -webkit-appearance: none; 
 
    border-radius: 0; 
 
    padding: 5px 0; 
 
} 
 
input:focus { 
 
    outline: 0; 
 
    border-color: #FF0000; 
 
} 
 
input:placeholder-shown + label { 
 
    cursor: text; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    -webkit-transform-origin: left bottom; 
 
      transform-origin: left bottom; 
 
    -webkit-transform: translate(0, 2.125em) scale(1.5); 
 
      transform: translate(0, 2.125em) scale(1.5); 
 
} 
 
input:not(:placeholder-shown) + label, 
 
input:focus + label { 
 
    -webkit-transform: translate(0, 0) scale(1); 
 
      transform: translate(0, 0) scale(1); 
 
    cursor: default; 
 
    color: #FF0000; 
 
} 
 
label { 
 
    max-width: 66.666%; 
 
    color: #ccc; 
 
} 
 
::-webkit-input-placeholder { 
 
    opacity: 0; 
 
    -webkit-transition: inherit; 
 
    transition: inherit; 
 
} 
 

 
/*Checkbox*/ 
 
[type='checkbox'] { 
 
    position: absolute; 
 
    left: -100vw; 
 
} 
 

 
[type='checkbox'] + label{ 
 
    --c-hl: dimgrey; 
 
    display: flex; 
 
    align-items: center; 
 
    color: var(--c-sel, var(--c-hl)); 
 
    font: 1.5rem/ 1 consolas, monaco, monospace; 
 
    cursor: pointer; 
 
} 
 
[type='checkbox'] + label:before { 
 
    margin-right: .375em; 
 
    width: 1em; 
 
    height: 1em; 
 
    box-shadow: 0 0 0 2px var(--c-sel, var(--c-hl)); 
 
    text-align: center; 
 
    color: var(--c-sel, transparent); 
 
    content: "✔"; 
 
} 
 
[type='checkbox']:focus + label, [type='checkbox']:hover + label { 
 
    --c-hl: #239023; 
 
} 
 
[type='checkbox']:checked + label { 
 
    --c-sel: #239023; 
 
}

<html> 
 
    <head> 
 
    <link href="style.css" type="text/css" rel="stylesheet"/> 
 
    </head> 
 
    
 
    <body> 
 
    
 
    <!--Input Field --> 
 
    <div class="field"> 
 
\t \t <input type="text" name="fullname" id="fullname" placeholder="Full Name" autofill="autofill"> 
 
\t \t <label for="fullname">Name</label> 
 
\t </div> 
 
        
 
    <!-- Chekcbox--> 
 
    <input type='checkbox' id='check'/> 
 
    <label for='check'>check</label> 
 
        
 
    </body> 
 
</html>

Quelle

2017-12-03 S. Molden

https://jsfiddle.net/Liamm12/7by8nkpL/1/

ich gerade neue Eingabe erstellt mit id="new" und Label bearbeitet for="new" und fügte hinzu, diesen Code können Sie die ID sehen #new, wo ich es in CSS hinzugefügt eine machen spezieller Entwurf.

[type='checkbox']#new:focus + label, [type='checkbox']#new:hover + label { 
     --c-hl: blue; 
    } 
    [type='checkbox']#new:checked + label { 
     --c-sel: blue; 
    } 
    input#new:not(:placeholder-shown) + label, input#new:focus + label { 
     -webkit-transform: translate(0, 0) scale(1); 
     transform: translate(0, 0) scale(1); 
     cursor: default; 
     color: blue; 
    }

prüfen Sie diesen Code

CSS:

/*Input Field*/ 

.field { 
    font-family: sans-serif; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-flow: column-reverse; 
     flex-flow: column-reverse; 
} 
label, 
input { 
    -webkit-transition: all 200ms ease; 
    transition: all 200ms ease; 
} 
input { 
    font-size: 24px; 
    border: 0; 
    border-bottom: 1px solid #ccc; 
    -webkit-appearance: none; 
    border-radius: 0; 
    padding: 5px 0; 
} 
input:focus { 
    outline: 0; 
    border-color: #FF0000; 
} 
input:placeholder-shown + label { 
    cursor: text; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -webkit-transform-origin: left bottom; 
      transform-origin: left bottom; 
    -webkit-transform: translate(0, 2.125em) scale(1.5); 
      transform: translate(0, 2.125em) scale(1.5); 
} 
input:not(:placeholder-shown) + label, 
input:focus + label { 
    -webkit-transform: translate(0, 0) scale(1); 
      transform: translate(0, 0) scale(1); 
    cursor: default; 
    color: #ff00c4; 
} 
label { 
    max-width: 66.666%; 
    color: #ccc; 
} 
::-webkit-input-placeholder { 
    opacity: 0; 
    -webkit-transition: inherit; 
    transition: inherit; 
} 

/*Checkbox*/ 
[type='checkbox'] { 
    position: absolute; 
    left: -100vw; 
} 

[type='checkbox'] + label{ 
    --c-hl: dimgrey; 
    display: flex; 
    align-items: center; 
    color: var(--c-sel, var(--c-hl)); 
    font: 1.5rem/ 1 consolas, monaco, monospace; 
    cursor: pointer; 
} 
[type='checkbox'] + label:before { 
    margin-right: .375em; 
    width: 1em; 
    height: 1em; 
    box-shadow: 0 0 0 2px var(--c-sel, var(--c-hl)); 
    text-align: center; 
    color: var(--c-sel, transparent); 
    content: "✔"; 
} 
[type='checkbox']:focus + label, [type='checkbox']:hover + label { 
    --c-hl: #000; 
} 
[type='checkbox']:checked + label { 
    --c-sel: #8d89b6; 
} 
[type='checkbox']#new:focus + label, [type='checkbox']#new:hover + label { 
    --c-hl: blue; 
} 
[type='checkbox']#new:checked + label { 
    --c-sel: #a20000; 
} 
input#new:not(:placeholder-shown) + label, input#new:focus + label { 
    -webkit-transform: translate(0, 0) scale(1); 
    transform: translate(0, 0) scale(1); 
    cursor: default; 
    color: #89ff10; 
}

HTML:

<div class="field"> 
    <input type="text" name="fullname" id="fullname" placeholder="Full Name" autofill="autofill"> 
    <label for="fullname">Name</label> 
</div> 

<!-- Chekcbox--> 
<input type='checkbox' id='check'/> 
<label for='check'>check</label> 
       <br> 
<input type='checkbox' id='new'/> 
<label for='new'>New one</label>

Quelle

2017-12-03 12:28:41 Liam

Styling 2 Elemente auf eine andere Art und Weise

Antwort

Verwandte Themen