จับคู่กล่องอินพุตว่างโดยใช้ CSS

ฉันจะใช้สไตล์กับกล่องใส่ข้อมูลที่ว่างได้อย่างไร หากผู้ใช้พิมพ์บางอย่างในฟิลด์อินพุตสไตล์นั้นไม่ควรใช้อีกต่อไป เป็นไปได้ใน CSS? ฉันลองสิ่งนี้:

input[value=""]

ถ้าเป็นเพียงสนามrequiredคุณก็สามารถไปด้วยinput:valid

#foo-thing:valid + .msg { visibility: visible!important; }      

 <input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

ดูสดบน jsFiddle

หรือปฏิเสธการใช้#foo-thing:invalid(ให้เครดิตกับ @SamGoody)

ในเบราว์เซอร์สมัยใหม่คุณสามารถใช้:placeholder-shownเพื่อกำหนดเป้าหมายอินพุตว่าง (เพื่อไม่ให้สับสน::placeholder)

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

ข้อมูลเพิ่มเติมและการสนับสนุนเบราว์เซอร์: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

ไม่มีตัวเลือกใน CSS ที่ทำสิ่งนี้ ตัวเลือกแอททริบิวจับคู่กับค่าแอททริบิวไม่ใช่ค่าที่คำนวณ

คุณจะต้องใช้จาวาสคริปต์

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

แทนที่จะใช้invalidคลาสหลอกเพื่อให้ได้สิ่งที่คุณต้องการเช่น:

input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}

<input required type="text" value="">

<input required type="text" value="Value">

input[value=""], input:not([value])

ทำงานร่วมกับ:

<input type="text" />
<input type="text" value="" />

แต่สไตล์จะไม่เปลี่ยนแปลงทันทีที่มีคนเริ่มพิมพ์ (คุณต้องใช้ JS เพื่อสิ่งนั้น)

หากเบราว์เซอร์ที่สนับสนุนมรดกไม่จำเป็นคุณสามารถใช้การรวมกันของrequired, และvalidinvalid

สิ่งที่ดีเกี่ยวกับการใช้นี้เป็นvalidและinvalidหลอกองค์ประกอบทำงานได้ดีกับคุณลักษณะประเภทของช่องใส่ ตัวอย่างเช่น:

input:invalid, textarea:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input:valid, textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

<input type="email" name="email" placeholder="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

สำหรับการอ้างอิง JSFiddle ที่นี่: http://jsfiddle.net/0sf6m46j/

$('input#edit-keys-1').blur(function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $(this).addClass('empty');
        $(this).removeClass('not-empty');
    } else {
        $(this).addClass('not-empty');
        $(this).removeClass('empty');
    }
});

ใน jQuery ฉันเพิ่มคลาสและสไตล์ด้วย CSS

.empty { background:none; }

สิ่งนี้ใช้ได้กับฉัน:

สำหรับ HTML ให้เพิ่มแอrequiredททริบิวในองค์ประกอบอินพุต

<input class="my-input-element" type="text" placeholder="" required />

สำหรับ CSS ใช้:invalidตัวเลือกเพื่อกำหนดเป้าหมายอินพุตว่าง

input.my-input-element:invalid {

}

หมายเหตุ:

• เกี่ยวกับrequiredจากw3Schools.com : "เมื่อมีอยู่จะระบุว่าต้องป้อนข้อมูลในฟิลด์ป้อนข้อมูลก่อนส่งแบบฟอร์ม"

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

การใช้ความคิดBerendในการใช้คลาสหลอกหลอก CSS4 นี้ฉันสามารถสร้างการตรวจสอบความถูกต้องของฟอร์มได้เฉพาะเมื่อผู้ใช้กรอกข้อมูลเสร็จ

นี่คือ ademo และคำอธิบายเกี่ยวกับ CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

หากคุณมีความสุขที่ไม่สนับสนุน IE หรือ pre-Chromium Edge (ซึ่งอาจใช้ได้ถ้าคุณใช้สิ่งนี้เพื่อเพิ่มประสิทธิภาพแบบก้าวหน้า) คุณสามารถใช้:placeholder-shownตามที่ Berend ได้กล่าวไว้ โปรดทราบว่าสำหรับ Chrome และ Safari คุณต้องมีตัวยึดตำแหน่งที่ไม่ว่างเปล่าเพื่อให้ใช้งานได้แม้ว่าจะมีพื้นที่ว่าง

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}

<fieldset>
  <legend>
    Floating labels example (no-JS)
  </legend>
  <label class="floating-label">
    <input type="text" placeholder=" ">
    <span>Username</span>
  </label>
  <label class="floating-label">
    <input type="Password" placeholder=" ">
    <span>Password</span>
  </label>
</fieldset>
<p>
  Inspired by Bootstrap's <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating labels</a>.
</p>

มันใช้งานได้สำหรับฉันที่จะเพิ่มชื่อคลาสให้กับอินพุตแล้วใช้กฎ CSS กับสิ่งนั้น:

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

ฉันสงสัยว่าคำตอบที่เรามีคุณสมบัติที่ชัดเจนในการรับกล่องใส่ที่ว่างเปล่าดูที่รหัสนี้

/*empty input*/
input:empty{
    border-color: red;
}
/*input with value*/
input:not(:empty){
    border-color: black;
}

UPDATE

input, select, textarea {
    border-color: @green;
    &:empty {
        border-color: @red;
    }
}

มากกว่าสำหรับการมีลักษณะที่ดีในการตรวจสอบ

 input, select, textarea {
    &[aria-invalid="true"] {
        border-color: amber !important;
    }

    &[aria-invalid="false"], &.valid {
        border-color: green !important;
    }
}

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

ปัญหาคือฉันควรจะใช้ css เดียวกันกับอินพุตที่เป็นตัวเลือกถ้ามันเต็มเพราะฉันต้องกรอก css ใช้คลาส psuedo: ถูกต้องซึ่งใช้ css กับอินพุตเพิ่มเติมเช่นกันเมื่อไม่ได้กรอกข้อมูล

นี่คือวิธีที่ฉันแก้ไขมัน;

HTML

<input type="text" required="required">
<input type="text" placeholder="">

CSS

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}