วิธีการจัดรูปแบบแอตทริบิวต์อ่านอย่างเดียวด้วย CSS

ขณะนี้ฉันใช้ readonly = "อ่านอย่างเดียว" เพื่อปิดใช้งานฟิลด์ ตอนนี้ฉันพยายามจัดรูปแบบคุณลักษณะโดยใช้ CSS ฉันพยายามใช้

input[readonly] {
/*styling info here*/
}

แต่มันไม่ทำงานด้วยเหตุผลบางอย่าง ฉันยังลอง

input[readonly='readonly'] {
/*styling info here*/
}

ที่ไม่ทำงานอย่างใดอย่างหนึ่ง

ฉันจะจัดรูปแบบแอตทริบิวต์อ่านอย่างเดียวด้วย CSS ได้อย่างไร

input[readonly]
{
    background-color:blue;
}

https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

โปรดทราบว่าใช้textarea[readonly="readonly"]งานได้หากคุณตั้งค่าเป็นreadonly="readonly"HTML แต่จะไม่ทำงานหากคุณตั้งค่าreadOnly-attribute เป็นtrueหรือ"readonly"ผ่าน JavaScript

สำหรับเลือก CSS ในการทำงานถ้าคุณตั้งค่าreadOnlyด้วย JavaScripttextarea[readonly]คุณต้องใช้ตัวเลือก

พฤติกรรมเดียวกันใน Firefox 14 และ Chrome 20

เพื่อความปลอดภัยฉันใช้ตัวเลือกทั้งสอง

textarea[readonly="readonly"], textarea[readonly] {
...
}

เพื่อความปลอดภัยคุณอาจต้องการใช้ทั้ง ...

input[readonly], input[readonly="readonly"] {
    /*styling info here*/
}

แอตทริบิวต์ readonly เป็น "แอตทริบิวต์บูลีน" ซึ่งสามารถว่างเปล่าหรือ "อ่านได้อย่างเดียว" (ค่าที่ถูกต้องเท่านั้น) http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

หากคุณกำลังใช้สิ่งที่ต้องการของ jQuery .prop('readonly', true)ฟังก์ชั่นที่คุณจะท้ายต้อง[readonly]ในขณะที่ถ้าคุณกำลังใช้แล้วคุณจะต้อง.attr("readonly", "readonly")[readonly="readonly"]

การแก้ไข: คุณจะต้องใช้input[readonly]เท่านั้น รวมถึงการinput[readonly="readonly"]ซ้ำซ้อน ดูhttps://stackoverflow.com/a/19645203/1766230

มีคำตอบมากมายที่นี่ แต่ยังไม่เคยเห็นคำที่ฉันใช้:

input[type="text"]:read-only { color: blue; }

จดบันทึกเส้นประในตัวเลือกหลอก หากมีการป้อนข้อมูลreadonly="false"ก็จะจับเช่นกันเนื่องจากตัวเลือกนี้จับการปรากฏตัวของอ่านอย่างเดียวโดยไม่คำนึงถึงค่า เทคนิคfalseไม่ถูกต้องตามข้อกำหนด แต่อินเทอร์เน็ตไม่ใช่โลกที่สมบูรณ์แบบ หากคุณต้องการครอบคลุมกรณีดังกล่าวคุณสามารถทำได้:

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea ทำงานในลักษณะเดียวกัน:

textarea:read-only:not([read-only="false"]) { color: blue; }

โปรดทราบว่าในขณะนี้สนับสนุน HTML ไม่เพียงtype="text"แต่การฆ่าของประเภทที่เป็นข้อความอื่น ๆ เช่นnumber, tel, email, date, time, urlฯลฯ แต่ละจะต้องมีการเพิ่มในตัวเลือก

มีสองสามวิธีในการทำเช่นนี้

ครั้งแรกคือการใช้กันอย่างแพร่หลาย มันทำงานบนเบราว์เซอร์ที่สำคัญทั้งหมด

input[readonly] {
 background-color: #dddddd;
}

ในขณะที่ด้านบนจะเลือกอินพุตทั้งหมดที่มีสิ่งที่readonlyแนบมาด้านล่างนี้จะเลือกเฉพาะสิ่งที่คุณต้องการ ตรวจสอบให้แน่ใจว่าได้แทนที่demoด้วยประเภทอินพุตที่คุณต้องการ

input[type="demo"]:read-only {
 background-color: #dddddd;
}

นี่เป็นทางเลือกสำหรับอันแรก แต่ไม่ได้ใช้งานมากทั้ง:

input:read-only {
 background-color: #dddddd;
}

:read-onlyเลือกได้รับการสนับสนุนใน Chrome, Opera และ Safari :-moz-read-onlyใช้ Firefox IE ไม่รองรับ:read-onlyตัวเลือก

คุณสามารถใช้งานinput[readonly="readonly"]ได้ แต่นี่ก็เหมือนกับinput[readonly]ประสบการณ์ของฉัน

input[readonly], input:read-only {
    /* styling info here */
}

Shoud ครอบคลุมทุกกรณีสำหรับฟิลด์อินพุตแบบอ่านอย่างเดียว ...

ใช้อักษรตัวแรกเป็นตัวพิมพ์ใหญ่เท่านั้น

input[readOnly] {
      background: red !important;
    }

<input type="text" name="country" value="China" readonly="readonly" />

หากคุณเลือกอินพุตตาม id แล้วเพิ่มinput[readonly="readonly"]แท็กใน css สิ่งที่ต้องการ:

 #inputID input[readonly="readonly"] {
     background-color: #000000;
 }

ที่จะไม่ทำงาน คุณต้องเลือกชั้นผู้ปกครองหรือรหัสแล้วใส่ สิ่งที่ต้องการ:

 .parentClass, #parentID input[readonly="readonly"] {
     background-color: #000000;
 }

2 เซ็นต์ของฉันในขณะที่รอตั๋วใหม่ในที่ทำงาน: D

ใช้สิ่งต่อไปนี้เพื่อทำงานในเบราว์เซอร์ทั้งหมด:

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }