ลบปุ่ม "clear field" ของ IE10 ในอินพุตบางตัวหรือไม่

742

มันเป็นคุณสมบัติที่มีประโยชน์เพื่อให้แน่ใจ แต่มีวิธีการปิดการใช้งานหรือไม่?
ตัวอย่างเช่นถ้าฟอร์มเป็นเขตข้อมูลข้อความเดียวและมีปุ่ม "ชัดเจน" อยู่ด้านข้างแล้วมันก็ไม่จำเป็นที่จะต้องมี X ในกรณีนี้มันจะเป็นการดีกว่าที่จะลบออก

สามารถทำได้และถ้าเป็นเช่นนั้นได้อย่างไร

css internet-explorer-10

— Niet the Dark Absolute
แหล่งที่มา

1

สิ่งนี้ยังมีประโยชน์ในเขตข้อมูลที่มีค่าเริ่มต้นซึ่งช่องว่างไม่สมเหตุสมผลเช่นปริมาณ

— Joe Flynn

4

เนื่องจากนี่ไม่ใช่การทริกเกอร์การป้อนข้อมูลนี่เป็นเรื่องยากมากเมื่อคุณผูกเหตุการณ์จาวาสคริปต์

— Kiwy

1267

ใส่สไตล์::-ms-clearหลอกองค์ประกอบสำหรับกล่อง:

.someinput::-ms-clear {
    display: none;
}

— Ry-
แหล่งที่มา

14

มันตลกถ้าคุณใช้โหมดความเข้ากันได้ของ IE เพื่อแสดงหน้าเว็บของคุณกับเอ็นจิ้นก่อน IE10 องค์ประกอบหลอกนี้ใช้งานไม่ได้และมันแสดงปุ่มต่อไป

— Yousef Salimpour

@Yousef: ใช่นั่นเป็นวิธีการทำงานและเป็นส่วนหนึ่งของสาเหตุที่คุณไม่ควรใช้โหมดความเข้ากันได้ในเว็บไซต์จริง มันเข้ากันไม่ได้จริง ๆ :)

— Ry-

@minitech - IE9 บน Windows 7 เครื่อง

— ManJan

3

การควบคุมนี้จะปรากฏใน IE10 + บน Win8 เท่านั้น เคล็ดลับคือมันยังคงปรากฏขึ้นเมื่อวางเอกสารในโหมดความเข้ากันได้

— EricLaw

48

@EricLaw: ไม่เฉพาะใน Win8 ตอนนี้ฉันใช้ Windows 7 อยู่และฉันเห็นปุ่ม X เหล่านั้นใน IE10 ของฉัน ดังนั้นคุณอาจบอกว่ามันเป็นฟีเจอร์สำหรับ IE10 + เท่านั้น (ไม่แน่ใจเกี่ยวกับ IE9 แต่) แต่ไม่แน่นอนสำหรับ Win8 เท่านั้นเนื่องจากจะปรากฏใน IE7 เวอร์ชัน Win7 อย่างไรก็ตามขอขอบคุณเคล็ดลับ @minitech!

— OMA

272

ฉันพบว่าการตั้งค่าwidthและheightไปที่0pxดีกว่า มิฉะนั้น IE10 จะละเว้นการขยายที่กำหนดไว้ในฟิลด์ - padding-rightซึ่งมีวัตถุประสงค์เพื่อป้องกันไม่ให้ข้อความพิมพ์บนไอคอน 'X' ที่ฉันซ้อนทับบนฟิลด์อินพุต ฉันคาดเดาว่าเป็น IE10 ภายในใช้padding-rightของท่านไปยัง::--ms-clearองค์ประกอบหลอกและซ่อนองค์ประกอบหลอกไม่ได้เรียกคืนมูลค่าให้กับpadding-rightinput

สิ่งนี้ใช้ได้ผลดีกว่าสำหรับฉัน:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}

— jimp
แหล่งที่มา

3

นี่คือ jsFiddle แสดงวิธีแก้ปัญหานี้: jsfiddle.net/zoldello/S5YRj

— Phil

106

ฉันจะใช้กฎนี้กับฟิลด์ข้อความประเภทอินพุตทั้งหมดดังนั้นจึงไม่จำเป็นต้องทำซ้ำในภายหลัง:

input[type=text]::-ms-clear { display: none; }

หนึ่งสามารถรับเฉพาะเจาะจงน้อยลงโดยใช้เพียง:

::-ms-clear { display: none; }

ฉันได้ใช้ในภายหลังแม้กระทั่งก่อนที่จะเพิ่มคำตอบนี้ แต่คิดว่าคนส่วนใหญ่ต้องการที่จะเฉพาะเจาะจงกว่านั้น โซลูชันทั้งสองทำงานได้ดี

— Wallace Sidhrée
แหล่งที่มา

ขอบคุณมันใช้งานได้สำหรับฉัน

— Sooraj Jose

76

คุณควรมีรูปแบบสำหรับ::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ):

::-ms-clear {
   display: none;
}

และคุณยังมีสไตล์สำหรับ::-ms-revealองค์ประกอบหลอกสำหรับฟิลด์รหัสผ่าน:

::-ms-reveal {
   display: none;
}

— ducdhm
แหล่งที่มา

6

หมายเหตุ - คิดว่าคุณสามารถทำให้::-ms-revealองค์ประกอบใช้งานได้หรือไม่ก่อนที่จะลบออก! (หรือถ้าคุณให้ปุ่มนี้สำหรับทุกคนเช่นผู้ถามเดิม) บางคนใช้มันจริง ๆ

— Ry-

3

@minitech - ฟังดูดีมาก คุณช่วยบอกให้เรารู้วิธีทำให้ Javascript เชื่อมโยงกับกิจกรรมอินพุตได้หรือไม่ มันไม่ได้เพิ่มเหตุการณ์ดังนั้นมันเกือบจะเป็นไปไม่ได้ที่จะทำงานกับ

— DarrellNorton

11

ฉันคิดว่ามันควรค่าแก่การสังเกตว่าสไตล์และโซลูชัน CSS ที่ใช้ไม่ได้เมื่อเพจกำลังทำงานในโหมดความเข้ากันได้ ตัวแสดงโหมดการทำงานร่วมกันจะไม่สนใจองค์ประกอบ :: - ms-clear ถึงแม้ว่าเบราว์เซอร์จะแสดง x

หากหน้าของคุณต้องทำงานในโหมดความเข้ากันได้คุณอาจติดอยู่กับการแสดง X

ในกรณีของฉันฉันกำลังทำงานกับตัวควบคุมที่ถูกผูกไว้กับข้อมูลบุคคลที่สามบางส่วนและวิธีแก้ไขปัญหาของเราคือจัดการเหตุการณ์ "onchange" และล้างที่เก็บข้อมูลสำรองหากล้างฟิลด์ด้วยปุ่ม x

— TomXP411
แหล่งที่มา

0

หากต้องการซ่อนลูกศรและข้ามในอินพุต "เวลา":

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}

— ClemPat
แหล่งที่มา