Porównaj ceny domen i usług IT, sprzedawców z całego świata

Nadawanie stylu wyłączono za pomocą tylko CSS


Mam dziwną sytuację. Próbuję nadać styl wyłączonemu przyciskowi Enter, ponieważ mam irytujący wskaźnik myszy, który zmienia tekst na biały. To sprawia, że ​​jest to mylące dla użytkownika, ponieważ działa jak zwykły przycisk.
Wypróbowałem kilka rzeczy, głównie css i kilka jQuery. Chciałbym, jeśli to możliwe, zachować to w css.
To jest mój html, przepraszam, że jest w formie bota pomocniczego.
{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }}

i to właśnie generuje przeglądarka
<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">

i pracowałem nad czymś takim
.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{
color:green
}

Każda pomoc byłaby świetna!
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Powiedzmy, że masz 3 przyciski:
<input type="button" disabled="disabled" value="hello world">
<input type="button" disabled value="hello world">
<input type="button" value="hello world">

Następujący CSS może służyć do stylizacji wyłączonego przycisku:
input[type="button"]:disabled{
color:#000;
}

Wpłynie to tylko na przycisk, który jest wyłączony.
Aby zatrzymać zmianę koloru po najechaniu kursorem, możesz również użyć tego:
input[type="button"]:disabled:hover{
color:#000;
}

Możesz również tego uniknąć, używając css-reset.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Spacja w selektorze CSS podświetla elementy potomne.
.btn input

To jest w zasadzie to, co napisałeś i wybierze elementy
& < input & >
wewnątrz dowolnego elementu, który ma klasę
btn
.
Myślę, czego szukasz
input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus

Umożliwiłoby to wybór elementu
& < input & >
z atrybutem
disabled
i klasą
btn
w trzech różnych hover ,
active
i
focus
.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Użyj tego CSS (

Przykład jsFiddle
http://jsfiddle.net/5vnHX/446/
):
input:disabled.btn:hover,
input:disabled.btn:active,
input:disabled.btn:focus {
color: green
}

Musisz napisać najbardziej zewnętrzny element po lewej stronie i najbardziej wewnętrzny element po prawej.
.btn: hover input: disabled
wybierze wszystkie wyłączone elementy wejściowe zawarte w elemencie klasy
btn
, który aktualnie znajduje się nad użytkownikiem.
Wolałbym
: disabled
zamiast
[disabled]
, zobacz to pytanie do dyskusji:

czy powinienem używać pseudoklasy CSS: disabled czy selektora atrybutu [disabled], czy jest to kwestia opinii?
https://coderoad.ru/20141450/
Nawiasem mówiąc, Laravel (PHP) generuje HTML - a nie przeglądarkę.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się