ใช้ CSS เพื่อเพิ่มเครื่องหมายดอกจัน 'ฟิลด์ที่ต้องระบุ' เพื่อสร้างอินพุต

เป็นวิธีที่ดีในการเอาชนะความจริงที่โชคร้ายที่รหัสนี้จะไม่ทำงานตามที่ต้องการคืออะไร:

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

ในโลกที่สมบูรณ์แบบทุกสิ่งที่ต้องการinputจะได้รับเครื่องหมายดอกจันน้อยซึ่งบ่งบอกว่าจำเป็นต้องมีข้อมูล วิธีการแก้ปัญหานี้เป็นไปไม่ได้เนื่องจาก CSS ถูกแทรกหลังจากเนื้อหาองค์ประกอบไม่ใช่หลังจากองค์ประกอบเอง แต่สิ่งที่ชอบจะเหมาะ ในไซต์ที่มีฟิลด์ที่ต้องการเป็นพันฉันสามารถย้ายเครื่องหมายดอกจันหน้าอินพุตโดยเปลี่ยนหนึ่งบรรทัดเป็นหนึ่งบรรทัด ( :afterเป็น:before) หรือฉันสามารถย้ายไปยังจุดสิ้นสุดของป้ายกำกับได้ (.required label:after ) หรือด้านหน้าฉลากหรือ ตำแหน่งบนกล่องบรรจุ ฯลฯ ...

นี่เป็นสิ่งสำคัญไม่เพียง แต่ในกรณีที่ฉันเปลี่ยนใจเกี่ยวกับสถานที่ที่จะใส่เครื่องหมายดอกจันทุกที่ แต่สำหรับกรณีแปลก ๆ ที่รูปแบบฟอร์มไม่อนุญาตให้ใช้เครื่องหมายดอกจันในตำแหน่งมาตรฐาน นอกจากนี้ยังทำงานได้ดีกับการตรวจสอบความถูกต้องที่ตรวจสอบแบบฟอร์มหรือไฮไลต์การควบคุมที่สมบูรณ์ที่ไม่ถูกต้อง

สุดท้ายไม่เพิ่มมาร์กอัปเพิ่มเติม

มีวิธีแก้ปัญหาที่ดีที่มีข้อดีของโค้ดที่เป็นไปไม่ได้ทั้งหมดหรือเกือบทั้งหมดหรือไม่?

นั่นคือสิ่งที่คุณมีในใจ?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {
  content:" *";
  color: red;
}

<label class="required">Name:</label>
<input type="text">

ดูhttps://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

ซอกับโครงสร้างที่แน่นอนของคุณ: http://jsfiddle.net/bQ859/

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

ผลที่คล้ายกันสามารถทำได้โดยใช้ภาพพื้นหลังของภาพของเครื่องหมายดอกจันและการตั้งค่าพื้นหลังของป้ายกำกับ / อินพุต / div ภายนอกและการขยายขนาดของภาพดอกจัน บางสิ่งเช่นนี้

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

สิ่งนี้จะใส่เครื่องหมายดอกจันลงในช่องข้อความ แต่จะใส่เครื่องหมายดอกจันdiv.requiredแทน.required inputเป็นอาจจะมากกว่าสิ่งที่คุณมองหาหากดูสง่างามน้อยลง

วิธีนี้ไม่จำเป็นต้องมีการป้อนข้อมูลเพิ่มเติม

ในการใส่มันเข้าอย่างแน่นอนตามที่ปรากฏในภาพต่อไปนี้:

ฉันพบวิธีการต่อไปนี้:

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }

 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

ไซต์ที่ฉันทำงานถูกเขียนโค้ดโดยใช้เลย์เอาต์คงที่ดังนั้นมันจึงใช้ได้สำหรับฉัน

ฉันไม่แน่ใจว่ามันดีสำหรับการออกแบบที่เป็นของเหลว

เขียนใน CSS

.form-group.required .control-label:after {content:"*";color:red;}

และ HTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

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

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

รูปภาพมีพื้นที่ 20px ทางด้านขวาเพื่อไม่ให้ทับซ้อนกับลูกศรแบบเลื่อนลงที่เลือก

และดูเหมือนว่านี้:

ใช้ jQuery และ CSS

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});

.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

ฉันคิดว่านี่เป็นวิธีที่มีประสิทธิภาพที่จะทำทำไมปวดหัวมาก

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div> 

มันคือ 2019 และคำตอบก่อนหน้าสำหรับปัญหานี้ไม่ได้ใช้

1. ตาราง CSS
2. ตัวแปร CSS
3. องค์ประกอบแบบฟอร์ม HTML5
4. SVG ใน CSS

CSS grid เป็นวิธีการทำแบบฟอร์มในปี 2019 เนื่องจากคุณสามารถมีป้ายกำกับของคุณนำหน้าอินพุตของคุณโดยไม่ต้องมี div, spans, spans, spans, asterisks และ relics อื่น ๆ

นี่คือที่ที่เราจะไปด้วย CSS ขั้นต่ำ:

HTML สำหรับด้านบน:

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

สามารถเพิ่มข้อความตัวยึดได้ด้วยและขอแนะนำอย่างยิ่ง (ฉันแค่ตอบแบบฟอร์มกลางนี้)

ตอนนี้สำหรับตัวแปร CSS:

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

CSS สำหรับองค์ประกอบของฟอร์ม:

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

รูปแบบตัวเองควรอยู่ในตาราง CSS:

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

ค่าสำหรับคอลัมน์สามารถตั้งค่าเป็น1fr autoหรือ1frมีอะไรก็ได้เช่น<p>แท็กในชุดรูปแบบการขยาย 1 / -1 คุณเปลี่ยนตัวแปรในเคียวรีสื่อบันทึกของคุณเพื่อให้คุณมีกล่องอินพุตกว้างเต็มบนมือถือ คุณสามารถเปลี่ยนช่องว่างกริดของคุณบนมือถือได้หากต้องการโดยใช้วิธีการตัวแปร CSS

เมื่อกล่องถูกต้องคุณควรได้รับเครื่องหมายสีเขียวแทนเครื่องหมายดอกจัน

SVG ใน CSS เป็นวิธีการบันทึกเบราว์เซอร์ไม่ต้องเดินทางไปที่เซิร์ฟเวอร์เพื่อรับภาพของเครื่องหมายดอกจัน ด้วยวิธีนี้คุณสามารถปรับแต่งเครื่องหมายดอกจันตัวอย่างที่นี่อยู่ในมุมที่ผิดปกติคุณสามารถแก้ไขได้เนื่องจากไอคอน SVG ด้านบนสามารถอ่านได้ทั้งหมด นอกจากนี้ยังสามารถแก้ไข viewbox เพื่อวางเครื่องหมายดอกจันด้านบนหรือด้านล่างตรงกลาง

ตัวอย่างนี้วางสัญลักษณ์ดอกจันไว้ด้านหน้าของเลเบลเพื่อแสดงว่าอินพุตนั้นเป็นฟิลด์ที่จำเป็น ฉันตั้งค่าคุณสมบัติ CSS โดยใช้% และ em เพื่อทำให้เว็บเพจของฉันตอบสนอง คุณสามารถใช้ px หรือหน่วยสัมบูรณ์อื่น ๆ หากคุณต้องการ

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}

<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>

สิ่งที่คุณต้องการคือ: selector ที่ต้องการ - มันจะเลือกฟิลด์ทั้งหมดที่มีแอททริบิวต์ 'required' (ไม่จำเป็นต้องเพิ่มคลาสเพิ่มเติม) สไตล์ - อินพุตตามความต้องการของคุณ คุณสามารถใช้ ': หลังจาก' ตัวเลือกและเพิ่มเครื่องหมายดอกจันในวิธีที่แนะนำในคำตอบอื่น ๆ

คุณสามารถบรรลุผลลัพธ์ที่ต้องการโดยห่อหุ้มโค้ด HTML ในแท็ก div ซึ่งมีคลาส "required" ตามด้วยคลาส "form-group" * อย่างไรก็ตามวิธีนี้จะใช้ได้เฉพาะเมื่อคุณมี Bootstrap

<div class="form-group required">
    <div class="required">
        <label>Name:</label>
        <input type="text">
    </div>
  <div>

สำหรับผู้ที่มาที่นี่ แต่มี jQuery:

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }