Poskušam spremeniti slog gumba z vdelano sliko, kot je prikazano v naslednji igrici:
.Žal v tem primeru ni slik.
Poskušam:
Poskusil sem narediti v button[disabled]
. Vendar nekaterih učinkov ni bilo mogoče onemogočiti. kot npr.
top: 1px; position: relative;
in slika.
Za onemogočene gumbe lahko uporabite psevdoelement :disabled
. Deluje za vse elemente.
Za brskalnike/ureditve, ki podpirajo samo CSS2, lahko uporabite selektor [disabled]
.
Tako kot pri sliki tudi pri gumbu ne vstavljajte slike. Uporabite CSS background-image
z background-position
in background-repeat
. Tako ne bo prišlo do vlečenja slike.
Problem z izborom: tukaj je povezava do posebnega vprašanja:
Primer za onemogočen izbirnik:
button {
border: 1px solid #0066cc;
background-color: #0099cc;
color: #ffffff;
padding: 5px 10px;
}
button:hover {
border: 1px solid #0099cc;
background-color: #00aacc;
color: #ffffff;
padding: 5px 10px;
}
button:disabled,
button[disabled]{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
div {
padding: 5px 10px;
}
<div>
<button> This is a working button </button>
</div>
<div>
<button disabled> This is a disabled button </button>
</div>
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
// apply css here what u like it will definitely work...
}