ตัวเลือก CSS สำหรับฟิลด์ป้อนข้อความ?

ฉันจะกำหนดเป้าหมายฟิลด์อินพุตของประเภท 'ข้อความ' โดยใช้ตัวเลือก CSS ได้อย่างไร

input[type=text]

หรือเพื่อ จำกัด การป้อนข้อความภายในแบบฟอร์ม

form input[type=text]

หรือหากต้องการ จำกัด รูปแบบบางรูปแบบเพิ่มเติมโดยถือว่ามี ID myForm

#myForm input[type=text]

ประกาศ: IE6 นี้ไม่รองรับดังนั้นหากคุณต้องการพัฒนาสำหรับ IE6 ให้ใช้ IE7.js (ตามคำแนะนำของ Yi Jiang) หรือเริ่มเพิ่มคลาสให้กับอินพุตข้อความทั้งหมดของคุณ

การอ้างอิง: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

เนื่องจากมีการระบุไว้ว่าค่าแอททริบิวต์เริ่มต้นอาจไม่สามารถเลือกได้ด้วยตัวเลือกแอททริบิวต์เราอาจพยายามครอบคลุมกรณีอื่น ๆ ของมาร์กอัปที่มีการแสดงข้อความอินพุต:

input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'

ยังคงเป็นกรณีนี้เมื่อมีการกำหนดประเภท แต่มีค่าที่ไม่ถูกต้องและยังคงกลับไปที่ type = "text" เพื่อให้ครอบคลุมว่าเราสามารถใช้เลือกอินพุตทั้งหมดที่ไม่ใช่ประเภทอื่นที่รู้จัก

input:not([type=button]):not([type=password]):not([type=submit])...

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

แจ้งให้ทราบล่วงหน้า: :notคลาสหลอกรองรับเฉพาะการเริ่มต้นด้วย IE9

คุณสามารถใช้ตัวเลือกแอททริบิวได้ที่นี่:

input[type="text"] {
    font-family: Arial, sans-serif;
}

สิ่งนี้ได้รับการสนับสนุนใน IE7 ขึ้นไป คุณสามารถใช้IE7.jsเพื่อเพิ่มการสนับสนุนหากคุณต้องการรองรับ IE6

ดู: http://reference.sitepoint.com/css/attributeselectorสำหรับข้อมูลเพิ่มเติม

ฉันมักจะใช้ตัวเลือกในสไตล์ชีทหลักของฉันจากนั้นสร้างไฟล์. js (jquery) เฉพาะ ie6 ที่เพิ่มคลาสให้กับประเภทอินพุตทั้งหมด ตัวอย่าง:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

จากนั้นเพียงแค่ทำซ้ำสไตล์ของฉันในสไตล์ชีทเฉพาะ ie6 โดยใช้คลาส ด้วยวิธีการที่มาร์กอัปที่แท้จริงนั้นสะอาดกว่า

คุณสามารถใช้:textตัวเลือกเพื่อเลือกอินพุตทั้งหมดด้วยข้อความประเภท

Fiddle ทำงาน

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:textเป็นส่วนขยาย jQuery และไม่ได้เป็นส่วนหนึ่งของข้อกำหนด CSS การสืบค้นโดยใช้: ข้อความไม่สามารถใช้ประโยชน์จากการเพิ่มประสิทธิภาพที่ได้รับจากวิธีการค้นหา DOM nativeSelectorAll () แบบเนทีฟ เพื่อประสิทธิภาพที่ดีขึ้นในเบราว์เซอร์สมัยใหม่ให้ใช้[type="text"]แทน IE6+นี้จะทำงาน

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

CSS

[type=text] // or input[type=text] 
{
    background: green;
}

ฉันมีฟิลด์ข้อความชนิดอินพุตในฟิลด์แถวของตาราง ฉันกำลังกำหนดเป้าหมายด้วยรหัส

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}

ดังที่ @Amir โพสต์ไว้ข้างต้นวิธีที่ดีที่สุดในปัจจุบันคือข้ามเบราว์เซอร์และทิ้ง IE6 ไว้

[type=text] {}

ไม่มีใครกล่าวถึงความจำเพาะ CSS ต่ำ ( ทำไม เป็น ที่ สำคัญ ?) เพื่อให้ห่างไกล[type=text] มี 0,0,1,0 แทน 0,0,1,1 input[type=text]กับ

ประสิทธิภาพที่ชาญฉลาดไม่มีผลกระทบเชิงลบใด ๆ อีกต่อไป

v4.0.0 ปกติเพียงแค่เปิดตัวด้วยการลดลงของความจำเพาะเลือก

ด้วยตัวเลือกคุณลักษณะเรากำหนดเป้าหมายข้อความประเภทอินพุตใน CSS

input[type=text] {
background:gold;
font-size:15px;
 }

การป้อนข้อมูล [ประเภท = ข้อความ]

ตัวเลือกนี้จะเลือกข้อความประเภทอินพุตทั้งหมดในหน้าเว็บ

ตัวเลือกคุณลักษณะมักใช้สำหรับอินพุต นี่คือรายการของตัวเลือกคุณลักษณะ:

[ชื่อ] องค์ประกอบทั้งหมดที่มีแอตทริบิวต์ชื่อถูกเลือก

[title = banana] องค์ประกอบทั้งหมดที่มีค่า 'Banana' ของแอตทริบิวต์ title

[title ~ = banana] องค์ประกอบทั้งหมดที่มี 'Banana' อยู่ในค่าของแอตทริบิวต์ title

[title | = banana] องค์ประกอบทั้งหมดที่ค่าของแอตทริบิวต์ชื่อขึ้นต้นด้วย 'banana'

[title ^ = banana] องค์ประกอบทั้งหมดที่ค่าของแอตทริบิวต์ชื่อขึ้นต้นด้วย 'banana'

[title $ = banana] องค์ประกอบทั้งหมดที่ค่าของแอตทริบิวต์ title ลงท้ายด้วย 'Banana'

[title * = banana] องค์ประกอบทั้งหมดที่ค่าของแอตทริบิวต์ title มีสตริงย่อย 'Banana'

การอ้างอิง: https://kolosek.com/css-selectors/