Input kelas pseudo Css: tidak (dinonaktifkan) tidak: [type = “submit”]: fokus

138

Saya ingin menerapkan beberapa css untuk elemen input dan saya ingin melakukannya hanya untuk input yang tidak dinonaktifkan dan tidak mengirimkan tipe, di bawah ini css tidak berfungsi, mungkin jika seseorang dapat menjelaskan kepada saya bagaimana ini harus ditambahkan.

input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}

css css-selectors pseudo-class

— Penguasa Burebista
sumber

285

Dari pada:

input:not(disabled)not:[type="submit"]:focus {}

Menggunakan:

input:not([disabled]):not([type="submit"]):focus {}

disabledadalah atribut sehingga perlu tanda kurung, dan Anda tampaknya telah mencampur / menghilangkan tanda titik dua dan tanda kurung pada :not()pemilih.

Demo: http://jsfiddle.net/HSKPx/

Satu hal yang perlu diperhatikan: Saya mungkin salah, tetapi saya tidak berpikir disabledinput biasanya dapat menerima fokus, sehingga bagian itu mungkin berlebihan.

Atau, gunakan :enabled

input:enabled:not([type="submit"]):focus { /* styles here */ }

Sekali lagi, saya tidak bisa memikirkan kasus di mana input yang dinonaktifkan dapat menerima fokus, jadi sepertinya tidak perlu.

— Wesley Murch
sumber

41

: not ([dinonaktifkan]) adalah cara penulisan yang sangat jelas: diaktifkan developer.mozilla.org/en-US/docs/Web/CSS/:enabled

— Adria

@Adria tidak bekerja untuk saya dengan <a>. Punya satu dengan <a disable='disabled'> dan harus secara khusus menggunakan pemilih: disabled FF65.

— Robert Niestroj

untuk beberapa alasan ": diaktifkan" tidak berfungsi di yaitu 11 untuk saya

— SLCH000

Apakah ada perbedaan antara menggunakan :not([disabled])VS. :not(:disabled)?

— bubencode

15

Sintaks Anda cukup edan.

Ubah ini:

input:not(disabled)not:[type="submit"]:focus{

untuk:

input:not(:disabled):not([type="submit"]):focus{

Tampaknya banyak orang tidak menyadari :enableddan :disabledmerupakan penyeleksi CSS yang valid ...

— Gavin
sumber

5

Mengapa tidak mempersingkat lebih jauh input:enabled:not([type="submit"]):focus{?

— Sean the Bean

7

Anda memiliki beberapa kesalahan ketik di pilih Anda. Harus:input:not([disabled]):not([type="submit"]):focus

Lihat jsFiddle ini untuk bukti konsep. Pada sidenote, jika saya menghapus properti "background-color", maka bayangan kotak tidak lagi berfungsi. Tidak yakin kenapa.

— PatrikAkerstrand
sumber