So stylen Sie eine angeklickte Schaltfläche in CSS

Question

Ich schaute auf W3 Schulen Website W3Schools, die Styling-Schaltflächen mit CSS erklärt. Ich muss einen Button-Stil angeben, wenn darauf geklickt wird. Was ist der Pseudo-Klassenselektor dafür? z.B. die Hoverschaltfläche ist:

.button:hover{ 
} 

Answer 1

Diese Schaltfläche gelb erscheint zunächst für andere Elemente arbeiten. Beim Schweben wird es orange. Wenn Sie darauf klicken, wird es rot. Ich habe verwendet: Hover und: Fokus, um den Stil anzupassen. (Der aktive Selektor wird normalerweise für Links verwendet<a> Tags))

button{ 
 
    background-color:yellow; 
 
} 
 

 
button:hover{background-color:orange;} 
 

 
button:focus{background-color:red;} 
 

 
a { 
 
    color: orange; 
 
} 
 

 
a.button{ 
 
    color:green; 
 
    text-decoration: none; 
 
} 
 

 
a:visited { 
 
    color: purple; 
 
} 
 

 
a:active { 
 
    color: blue; 
 
}

<button> 
 
Hover and Click! 
 
</button> 
 
<br><br> 
 

 
<a href="#">Hello</a><br><br> 
 
<a class="button" href="#">Bye</a>

Answer 2

Es gibt drei Zustände der Schaltfläche

• Normal: Sie können wählen, wie diese button
• Hover: Sie können wählen, wie diese button:hover
• Pressed/Clicked: Sie können wählen wie folgt button:active

Normal:

.button 
{ 
    //your css 
} 

Aktive

.button:active 
{ 
     //your css 
} 

Hover

.button:hover 
{ 
     //your css 
} 

SNIPPET:

Verwenden Sie :active, um den aktiven Status der Schaltfläche zu stylen.

button:active{ 
 
    background-color:red; 
 
}

<button>Click Me</button>

Answer 3

Wenn Sie die Taste nur wollen verschiedene Styling haben, während die Maus Sie die :active Pseudo-Klasse verwenden können, gedrückt wird.

Wenn Sie andererseits möchten, dass der Stil nach dem Klicken bleibt, müssen Sie Javascript verwenden

Answer 4

versuchen, diese

button:focus{ 
 
    background-color:red; 
 
}

<button>click me</button>

Answer 5

Taste: Hover nur, wenn Sie den Mauszeiger über die Schaltfläche bewegen.
Versuchen Taste: aktiv statt ... wird auch

button:active{ 
 
    color: red; 
 
}

Answer 6

Leider gibt es keine: Pseudo-Selektor klicken. Wenn Sie das Aussehen beim Klicken ändern möchten, sollten Sie Jquery/Javascript verwenden. Es ist sicherlich besser als der "Hack" für reines HTML/CSS. Aber wenn Sie darauf bestehen ...

input { 
 
display: none; 
 
} 
 
span { 
 
padding: 20px; 
 
font-family: sans-serif; 
 
} 
 
input:checked + span { 
 
    background: #444; 
 
    color: #fff; 
 
}

<label for="input"> 
 
    <input id="input" type="radio" /> 
 
    <span>NO JS styling</span> 
 
    </label>

Oder, wenn Sie möchten, können Sie das Styling wechseln:

input { 
 
display: none; 
 
} 
 
span { 
 
padding: 20px; 
 
font-family: sans-serif; 
 
} 
 
input:checked + span { 
 
    background: #444; 
 
    color: #fff; 
 
}

<label for="input"> 
 
    <input id="input" type="checkbox" /> 
 
    <span>NO JS styling</span> 
 
    </label>