อินพุตคลาสหลอก Css: not (disabled) not: [type =“ submit”]: focus

ฉันต้องการใช้ css บางส่วนสำหรับองค์ประกอบอินพุตและฉันต้องการทำเช่นนั้นเฉพาะกับอินพุตที่ไม่ได้ปิดใช้งานและไม่ใช่ประเภทการส่งด้านล่าง css ไม่ทำงานบางทีถ้ามีใครสามารถอธิบายฉันได้ว่าจะต้องเพิ่มสิ่งนี้อย่างไร

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

แทน:

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

ใช้:

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

disabledเป็นแอตทริบิวต์ดังนั้นจึงต้องใช้วงเล็บและดูเหมือนว่าคุณจะมีเครื่องหมายโคลอนและเครื่องหมายวงเล็บผสมกัน / ขาดหายไปบน:not()ตัวเลือก

การสาธิต: http://jsfiddle.net/HSKPx/

สิ่งหนึ่งที่ควรทราบ: ฉันอาจคิดผิด แต่ฉันไม่คิดว่าdisabledอินพุตสามารถรับโฟกัสได้ตามปกติดังนั้นส่วนนั้นอาจซ้ำซ้อน

หรือใช้ :enabled

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

อีกครั้งฉันไม่สามารถนึกถึงกรณีที่อินพุตที่ปิดใช้งานสามารถรับโฟกัสได้ดังนั้นดูเหมือนว่าไม่จำเป็น

ไวยากรณ์ของคุณค่อนข้างน่าเบื่อ

เปลี่ยนสิ่งนี้:

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

ถึง:

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

ดูเหมือนว่าหลายคนไม่รู้:enabledและ:disabledเป็นตัวเลือก CSS ที่ถูกต้อง ...

คุณพิมพ์ผิดเล็กน้อยในการเลือกของคุณ มันควรจะเป็น:input:not([disabled]):not([type="submit"]):focus

ดูjsFiddleนี้เพื่อพิสูจน์แนวคิด ในด้านข้างถ้าฉันลบคุณสมบัติ "background-color" ออกไปเงาของกล่องจะไม่ทำงานอีกต่อไป ไม่แน่ใจว่าทำไม