ฉันสามารถใช้ a: before หรือ: หลังจาก pseudo-element บนฟิลด์อินพุตได้หรือไม่?

ฉันกำลังพยายามใช้:afterองค์ประกอบหลอก CSS บนinputเขตข้อมูล แต่มันไม่ทำงาน ถ้าฉันใช้กับ a spanมันใช้งานได้ดี

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

ใช้งานได้ (ทำให้ยิ้มหลังจาก "buu!" และก่อน "เพิ่มเติม")

<span class="mystyle">buuu!</span>a some more

สิ่งนี้ใช้ไม่ได้ - มีเพียงบางสีเท่านั้นค่าสีแดง แต่ไม่มีรอยยิ้ม

<input class="mystyle" type="text" value="someValue">

ผมทำอะไรผิดหรือเปล่า? ฉันควรใช้ตัวเลือกหลอกอื่น

หมายเหตุ: ฉันไม่สามารถเพิ่มสิ่งspanรอบตัวของฉันinputเพราะมันถูกสร้างขึ้นโดยการควบคุมของบุคคลที่สาม

:afterและ:beforeไม่ได้รับการสนับสนุนใน Internet Explorer 7 และภายใต้องค์ประกอบใด ๆ

นอกจากนี้ยังไม่ได้หมายความว่าจะใช้ในองค์ประกอบแทนที่เช่นองค์ประกอบของแบบฟอร์ม (ปัจจัย) และองค์ประกอบภาพ

กล่าวอีกนัยหนึ่งเป็นไปไม่ได้ที่ CSS บริสุทธิ์

อย่างไรก็ตามหากใช้jQueryคุณสามารถใช้

$(".mystyle").after("add your smiley here");

API เอกสารใน. ภายหลัง

ในการผนวกเนื้อหาของคุณด้วย javascript สิ่งนี้จะใช้ได้กับทุกเบราว์เซอร์

:beforeและ:afterแสดงผลภายในภาชนะ

และ <input> ไม่สามารถมีองค์ประกอบอื่น ๆ

องค์ประกอบ Pseudo สามารถกำหนดได้ (หรือกล่าวสนับสนุนที่ดีกว่าเท่านั้น) ในองค์ประกอบภาชนะ เพราะวิธีที่พวกเขาจะแสดงผลอยู่ในภาชนะที่ตัวเองเป็นองค์ประกอบเด็ก inputไม่สามารถมีองค์ประกอบอื่น ๆ ได้ดังนั้นจึงไม่รองรับ A buttonในทางกลับกันนั่นก็เป็นองค์ประกอบของฟอร์มที่รองรับพวกมันเพราะมันเป็นที่เก็บขององค์ประกอบย่อยอื่น ๆ

หากคุณถามฉันหากเบราว์เซอร์บางส่วนไม่แสดงทั้งสองหลอกองค์ประกอบในองค์ประกอบที่ไม่ใช่ภาชนะมันเป็นข้อผิดพลาดและความสอดคล้องที่ไม่ได้มาตรฐาน ข้อกำหนดพูดถึงเนื้อหาองค์ประกอบโดยตรง ...

ข้อกำหนด W3C

หากเราอ่านข้อกำหนดอย่างละเอียดจริง ๆ แล้วมันบอกว่ามันถูกแทรกเข้าไปในองค์ประกอบที่มี:

ผู้เขียนระบุสไตล์และที่ตั้งของเนื้อหาที่สร้างด้วย: before และ: after pseudo-elements ตามที่ชื่อระบุไว้: ก่อนและ: หลังจากองค์ประกอบแบบหลอกระบุตำแหน่งของเนื้อหาก่อนและหลังเนื้อหาต้นไม้เอกสารขององค์ประกอบ คุณสมบัติ 'เนื้อหา' ร่วมกับองค์ประกอบหลอกเหล่านี้ระบุสิ่งที่ถูกแทรก

ดู? ต้นไม้เอกสารองค์ประกอบของเนื้อหา อย่างที่ฉันเข้าใจนี่หมายถึงภายในคอนเทนเนอร์

มันทำงานได้กับอินพุตบางประเภท อย่างน้อยใน Chrome

<input type="checkbox" />

ทำงานได้ดีเช่นเดียวกับ

<input type="radio" />

มันเป็นเพียงtype=textและคนอื่น ๆ ที่ไม่ทำงาน

นี่เป็นอีกวิธีหนึ่ง (สมมติว่าคุณสามารถควบคุม HTML ได้): เพิ่มช่องว่าง<span></span>ด้านขวาหลังจากอินพุตและกำหนดเป้าหมายในการใช้ CSSinput.mystyle + span:after

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

ผมใช้วิธีนี้ใน AngularJS เพราะมันจะเพิ่ม.ng-invalidชั้นเรียนโดยอัตโนมัติไปยัง<input>รูปแบบองค์ประกอบและรูปแบบ <label>แต่ไม่ได้ไป

:beforeและ:afterถูกนำไปใช้ภายในคอนเทนเนอร์ซึ่งหมายความว่าคุณสามารถใช้มันสำหรับองค์ประกอบที่มีแท็กสิ้นสุด

มันใช้ไม่ได้กับองค์ประกอบที่ปิดตัวเอง

ในหมายเหตุด้านองค์ประกอบที่ปิดตัวเอง (เช่น img / ชม. / อินพุต) ยังเป็นที่รู้จักในนาม 'องค์ประกอบแทนที่' เนื่องจากมีการแทนที่ด้วยเนื้อหาที่เกี่ยวข้อง "External Objects" เพราะขาดเทอมที่ดีกว่า อ่านที่นี่ดีกว่า

ฉันใช้background-imageเพื่อสร้างจุดสีแดงสำหรับฟิลด์ที่ต้องการ

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

ดู Codepen

คุณไม่สามารถใส่องค์ประกอบหลอกในองค์ประกอบอินพุต แต่สามารถใส่องค์ประกอบเงาเช่นตัวยึด!

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

จะทำให้การทำงานในเบราว์เซอร์อื่น ๆ ให้ใช้:-moz-placeholder, ::-moz-placeholderและในตัวเลือกที่แตกต่างกัน:-ms-input-placeholder ไม่สามารถจัดกลุ่มตัวเลือกได้เนื่องจากหากเบราว์เซอร์ไม่รู้จักตัวเลือกจะทำให้คำสั่งทั้งหมดใช้ไม่ได้

UPDATE : โค้ดด้านบนใช้ได้กับ CSS pre-processor เท่านั้น (SASS, LESS ... ) โดยไม่ต้องใช้ตัวประมวลผลล่วงหน้า:

input[type="text"]::-webkit-input-placeholder:before { // your code }

องค์ประกอบ Pseudo เช่น:afterนั้น:beforeมีไว้สำหรับองค์ประกอบคอนเทนเนอร์เท่านั้น องค์ประกอบการเริ่มต้นและปิดในสถานที่เดียวเช่น<input/>, <img>ฯลฯ ไม่ได้องค์ประกอบภาชนะและด้วยเหตุนี้องค์ประกอบหลอกไม่ได้รับการสนับสนุน เมื่อคุณใช้องค์ประกอบหลอกกับองค์ประกอบภาชนะเช่น<div>และถ้าคุณตรวจสอบรหัส (ดูภาพ) คุณสามารถเข้าใจสิ่งที่ฉันหมายถึง อันที่จริงองค์ประกอบหลอกถูกสร้างขึ้นภายในองค์ประกอบภาชนะ ไม่สามารถทำได้ในกรณีของ<input>หรือ<img>

วิธีการทำงานใน CSS บริสุทธิ์:

เคล็ดลับคือการสมมติว่ามีองค์ประกอบ dom หลังจากฟิลด์ข้อความ

/*
 * The trick is here:
 * this selector says "take the first dom element after
 * the input text (+) and set its before content to the
 * value (:before).
 */
input#myTextField + *:before {
  content: "👍";
} 

<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
  There's maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) โซลูชันที่ จำกัด แม้ว่า:

• คุณต้องหวังว่าจะมีองค์ประกอบต่อไปนี้
• คุณต้องหวังว่าจะไม่มีฟิลด์อินพุตอื่นติดตามฟิลด์อินพุตของคุณ

แต่ในกรณีส่วนใหญ่เรารู้รหัสของเราดังนั้นวิธีนี้ดูเหมือนจะมีประสิทธิภาพและ 100% CSS และ 0% jQuery

ฉันพบโพสต์นี้เมื่อฉันมีปัญหาเดียวกันนี่เป็นวิธีแก้ปัญหาที่เหมาะกับฉัน ตรงข้ามกับการแทนที่ค่าของอินพุตเพียงลบออกและวางตำแหน่งช่วงหลังที่มีขนาดเท่ากันการเว้นช่วงสามารถมี:beforeคลาสหลอกใช้กับไอคอนแบบอักษรที่คุณเลือกได้

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

ความเข้าใจผิดที่ใหญ่ที่สุดของที่นี่คือความหมายของคำและbefore afterพวกเขาไม่ได้อ้างถึงองค์ประกอบเอง แต่หมายถึงเนื้อหาในองค์ประกอบ ดังนั้นelement:beforeอยู่ก่อนเนื้อหาและelement:afterอยู่หลังเนื้อหา แต่ทั้งคู่ยังคงอยู่ในองค์ประกอบดั้งเดิม

inputองค์ประกอบมีเนื้อหาในมุมมอง CSS ไม่มีและไม่เคยมีใคร:beforeหรือ:afterเนื้อหาหลอก นี่เป็นความจริงขององค์ประกอบโมฆะหรือแทนที่อื่น ๆ อีกมากมาย

ไม่มีอิลิเมนต์เทียมที่อ้างถึงภายนอกอิลิเมนต์

ในจักรวาลที่แตกต่างองค์ประกอบหลอกเหล่านี้อาจถูกเรียกอย่างอื่นเพื่อทำให้ความแตกต่างนี้ชัดเจนยิ่งขึ้น และบางคนอาจเสนอองค์ประกอบหลอกซึ่งอยู่นอกองค์ประกอบอย่างแท้จริง จนถึงตอนนี้นี่ไม่ใช่กรณีในจักรวาลนี้

ตามหมายเหตุในข้อมูลจำเพาะ CSS 2.1 สเปค“ ไม่ได้กำหนดการโต้ตอบของ: before และ: after ด้วยองค์ประกอบที่ถูกแทนที่ (เช่น IMG ใน HTML) จะมีการกำหนดรายละเอียดเพิ่มเติมในสเปคในอนาคต” แม้ว่าinputจะไม่ได้เป็นองค์ประกอบที่ถูกแทนที่จริงๆอีกต่อไป แต่สถานการณ์พื้นฐานไม่ได้เปลี่ยนแปลง: ผลกระทบของ:beforeและ:afterมันต่อมันแบบไม่ระบุรายละเอียดและโดยทั่วไปจะไม่มีผลกระทบใด ๆ

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

ดังที่คนอื่นอธิบายไว้inputs เป็นองค์ประกอบโมฆะที่ถูกแทนที่ด้วย kinda ดังนั้นเบราว์เซอร์ส่วนใหญ่จะไม่อนุญาตให้คุณสร้าง::beforeหรือ::afterหลอกองค์ประกอบในพวกเขา

อย่างไรก็ตามคณะทำงาน CSS มีการพิจารณาอย่างชัดเจนช่วยให้::beforeและ::afterในกรณีที่มีinputappearance: none

จากhttps://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,

Safari และ Chrome ทั้งคู่อนุญาตให้ใช้องค์ประกอบแบบหลอกในอินพุตฟอร์มของพวกเขา เบราว์เซอร์อื่นไม่ทำเช่นนั้น เราดูที่การลบสิ่งนี้ แต่ตัวนับการใช้กำลังบันทึก ~ .07% ของหน้าเว็บที่ใช้ซึ่งเป็น 20x ขีด จำกัด การลบสูงสุดของเรา

การระบุองค์ประกอบปลอมในอินพุตจริงต้องมีการระบุโครงสร้างภายในของอินพุตอย่างน้อยบ้างซึ่งเรายังไม่ได้จัดการให้ทำ (และฉันไม่มั่นใจว่าเราสามารถทำ * ได้) แต่ Boris แนะนำในหนึ่งใน bugthreads ทำให้มันปรากฏตัว: ไม่มีอินพุต - โดยทั่วไปเพียงแค่เปลี่ยนมันให้เป็น <div> s แทนที่จะเป็นองค์ประกอบ "แทนที่ด้วย kinda"

ลองต่อไป:

label[for="userName"] {
  position: relative;
}

label[for="userName"]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
  right: -30px;
}

<label for="userName">
	Name: 
	<input type="text" name="userName" id="userName">
	</label>

คุณต้องมี wrapper บางชนิดรอบ ๆ อินพุตเพื่อใช้ก่อนหรือหลังองค์ประกอบหลอก นี่คือซอที่มีมาก่อนใน div wrapper ของอินพุทแล้ววางไว้ข้างในอินพุท - หรืออย่างน้อยก็ดูเหมือนว่ามัน เห็นได้ชัดว่านี่คือการทำงาน แต่มีประสิทธิภาพในการเหน็บแนมและยืมตัวเองเพื่อตอบสนอง คุณสามารถทำให้เรื่องนี้เป็นเรื่องง่ายหากคุณต้องการใส่เนื้อหาอื่น

Fiddle ทำงาน

ดอลล่าร์เซ็นในอินพุตเป็น pseudo-element: http://jsfiddle.net/kapunahele/ose4r8uj/1/

HTML:

<div class="test">
    <input type="text"></input>
</div>

CSS:

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

หากคุณพยายามจัดองค์ประกอบของอินพุตด้วย: before และ: after คุณกำลังพยายามที่จะต่อรอง เลียนแบบเอฟเฟกต์ของ span, div หรือแม้กระทั่งองค์ประกอบใน CSS stack ของคุณ

ดังที่คำตอบของ Robert Koritnik ชี้ให้เห็น: ก่อนและ: หลังจากสามารถใช้ได้กับองค์ประกอบของคอนเทนเนอร์เท่านั้นและองค์ประกอบอินพุตเท่านั้นไม่ใช่คอนเทนเนอร์

HOWEVER, HTML 5 แนะนำองค์ประกอบปุ่มซึ่งเป็นคอนเทนเนอร์และทำงานเหมือนองค์ประกอบ [type = "submit | reset"] อินพุต

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

สรุป

มันใช้งานไม่ได้<input type="button">แต่ใช้งานได้ดี<input type="checkbox">แต่มันทำงานได้ดีกับ

ซอ : http://jsfiddle.net/gb2wY/50/

HTML :

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

CSS :

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

:beforeและ:afterทำงานได้เฉพาะกับโหนดที่สามารถมีโหนดย่อยได้เนื่องจากจะแทรกโหนดใหม่เป็นโหนดแรกหรือโหนดสุดท้าย

ฉันพบว่าคุณสามารถทำได้เช่นนี้:

.submit .btn input
{
   padding:11px 28px 12px 14px;
   background:#004990;
   border:none;
    color:#fff;
}

 .submit .btn
 {
     border:none;
     color:#fff;
     font-family: 'Open Sans', sans-serif;
     font-size:1em;
     min-width:96px;
     display:inline-block;
     position:relative;
 }

.submit .btn:after
{
    content:">";
    width:6px;
    height:17px;
    position:absolute;
    right:36px;
    color:#fff;
    top:7px;
}

<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

คุณต้องมีผู้ปกครอง div ที่ใช้การแพ็ดและ: หลังจาก ผู้ปกครองคนแรกจะต้องมีความสัมพันธ์กันและ div ที่สองควรเป็นแบบสัมบูรณ์เพื่อให้คุณสามารถกำหนดตำแหน่งของ after

ฉันมีความคิดอื่นใช้สิ่งนี้แทน:

<div>
<input type="text"></input>text can be entered here</div>