: না (: খালি) সিএসএস নির্বাচক কাজ করছেন না?

Question 1

আমার এই নির্দিষ্ট সিএসএস নির্বাচকের সাথে একটি সময় হ্যাক লাগছে যা আমি যুক্ত :not(:empty)করার পরে কাজ করতে চাই না । অন্যান্য নির্বাচকদের যে কোনও সংমিশ্রণের সাথে এটি দুর্দান্ত কাজ করছে বলে মনে হচ্ছে:

input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }

আমি যদি :not(:empty)অংশটি সরিয়ে ফেলি তবে এটি ঠিক কাজ করে। এমনকি যদি আমি input:not(:empty)এটিতে নির্বাচককে পরিবর্তন করি তবে এখনও ইনপুট ক্ষেত্রগুলি নির্বাচন করবে না যার মধ্যে পাঠ্য টাইপ করা আছে। এটি কি ভাঙ্গা নাকি আমি কেবল :emptyকোনও :not()নির্বাচকের মধ্যে ব্যবহারের অনুমতি পাচ্ছি না ?

কেবলমাত্র অন্য একটি বিষয় যা আমি ভাবতে পারি তা হ'ল ব্রাউজারগুলি এখনও বলছে যে উপাদানটি খালি রয়েছে কারণ এর কোনও সন্তান নেই, প্রতি কথার জন্য কেবল একটি "মান"। :emptyকোনও নিয়মিত উপাদান বনাম কোনও ইনপুট উপাদানটির জন্য কি নির্বাচকটির আলাদা কার্যকারিতা থাকে না? এটি সম্ভবত সম্ভাব্য বলে মনে হচ্ছে না কারণ :emptyকোনও ক্ষেত্র ব্যবহার করে এবং এতে কিছু টাইপ করার ফলে বিকল্প প্রভাবগুলি চলে যাবে (কারণ এটি আর খালি নেই)।

ফায়ারফক্স 8 এবং ক্রোমে পরীক্ষিত।

Question 2

একটি হচ্ছে অকার্যকর উপাদান , একটি <input>উপাদান হিসেবে গণ্য করা হয় খালি "খালি" এর এইচটিএমএল সংজ্ঞা দ্বারা, যেহেতু সব অকার্যকর উপাদানের বিষয়বস্তু মডেল সবসময় খালি । সুতরাং তারা সর্বদা :emptyছদ্ম-শ্রেণীর সাথে মিলবে , তাদের মান আছে কি না। এ কারণেই কেন তাদের মান শুরু এবং শেষ ট্যাগের মধ্যে পাঠ্য সামগ্রীর চেয়ে স্টার্ট ট্যাগে কোনও অ্যাট্রিবিউট দ্বারা প্রতিনিধিত্ব করা হয়।

এছাড়াও, নির্বাচকদের থেকে অনুমান :

:emptyসিউডো-বর্গ একটি উপাদান সব সময়ে কোন সন্তান রয়েছে যে প্রতিনিধিত্ব করে। ডকুমেন্ট গাছের ক্ষেত্রে, কেবলমাত্র এলিমেন্ট নোড এবং কনটেন্ট নোডগুলি (যেমন ডিওএম টেক্সট নোডস, সিডিএটিএ নোড এবং সত্তা রেফারেন্স) যার ডেটার একটি শূন্য-দৈর্ঘ্য রয়েছে তা অবশ্যই শূন্যতার উপর প্রভাবিত হিসাবে বিবেচিত হবে;

ফলস্বরূপ, input:not(:empty)যথাযথ এইচটিএমএল ডকুমেন্টে কখনই কোনও কিছু মিলবে না। (এটি এখনও অনুমানীয় এক্সএমএল নথিতে কাজ করবে যা এমন <input>উপাদানকে সংজ্ঞায়িত করে যা পাঠ্য বা শিশু উপাদানগুলি গ্রহণ করতে পারে))

আমি মনে করি না যে আপনি খালি <input>ক্ষেত্রগুলি কেবলমাত্র সিএসএস ব্যবহার করে গতিশীলভাবে স্টাইল করতে পারবেন (অর্থাত্ যখন ক্ষেত্র খালি থাকে তখন প্রযোজ্য বিধিগুলি এবং একবার পাঠ্য প্রবেশ করানো হয় না)। আপনি যদি শূন্য ক্ষেত্রগুলির শূন্য বৈশিষ্ট্য ( ) বা সম্পূর্ণরূপে ( ) বৈশিষ্ট্যের অভাব থাকে তবে আপনি এটি প্রাথমিকভাবে নির্বাচন করতে পারেন তবে এটি সম্পর্কে এটি।valueinput[value=""]input:not([value])

Question 3

ইনলাইন জাভাস্ক্রিপ্ট onkeyup="this.setAttribute('value', this.value);"এবং এটি দিয়ে সম্ভবinput:not([value=""]):not(:focus):invalid

ডেমো: http://jsfiddle.net/mhsyfvv9/

input:not([value=""]):not(:focus):invalid{
  background-color: tomato;
}

<input 
  type="email" 
  value="" 
  placeholder="valid mail" 
  onchange="this.setAttribute('value', this.value);" />

স্নিপেট প্রসারিত করুন

Question 4

আপনি ব্যবহার করে চেষ্টা করতে পারেন: স্থানধারক দেখানো ...

input {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  border: 2px solid lightblue;
  outline: 0;
  font-weight:bold;
  transition: border-color 200ms;
  font-family: sans-serif;
}

.validation {
  opacity: 0;
  font-size: 12px;
  font-family: sans-serif;
  color: crimson;
  transition: opacity;
}

input:required:valid {
  border-color: forestgreen;
}

input:required:invalid:not(:placeholder-shown) {
  border-color: crimson;
}

input:required:invalid:not(:placeholder-shown) + .validation {
  opacity: 1;
}

<input type="email" placeholder="e-mail" required>
<div class="validation">Not valid</span>

স্নিপেট প্রসারিত করুন

কোন মহান সমর্থন যদিও ... ক্যানিজ

Question 5

.floating-label-input {
  position: relative;
  height:60px;
}
.floating-label-input input {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
  border: 0 none;
  outline: none;
  vertical-align: middle;
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
}
.floating-label-input label {
  position: absolute;
  top: calc(50% - 5px);
  font-size: 22px;
  left: 0;
  color: #000;
  transition: all 0.3s;
}
.floating-label-input input:focus ~ label, .floating-label-input input:focus ~ label, .floating-label-input input:valid ~ label {
  top: 0;
  font-size: 15px;
  color: #33bb55;
}
.floating-label-input .line {
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  background: #000;
  left: 0;
}
.floating-label-input .line:after {
  content: "";
  display: block;
  width: 0;
  background: #33bb55;
  height: 1px;
  transition: all 0.5s;
}
.floating-label-input input:focus ~ .line:after, .floating-label-input input:focus ~ .line:after, .floating-label-input input:valid ~ .line:after {
  width: 100%;
}

<div class="floating-label-input">
      <input type="text" id="id" required/>
      <label for="id" >User ID</label>
      <span class="line"></span>
</div>

স্নিপেট প্রসারিত করুন

Question 6

আপনি এটি অন্যভাবে যোগাযোগ করতে পারেন; :emptyসিউডো-ক্লাসের ব্যবহার বাদ দিন এবং ক্ষেত্রের inputএকটি উল্লেখযোগ্য মান সনাক্ত করতে ইভেন্টগুলি ব্যবহার করুন <input>এবং এটি অনুসারে এটি স্টাইল করুন:

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  input.addEventListener('input', function() {
    var bg = this.value ? 'green' : 'red';
    this.style.backgroundColor = bg;
  });
}

body {
  padding: 40px;
}
#inputList li {
  list-style-type: none;
  padding-bottom: 1.5em;
}
#inputList li input,
#inputList li label {
  float: left;
  width: 10em;
}
#inputList li input {
  color: white;
  background-color: red;
}
#inputList li label {
  text-align: right;
  padding-right: 1em;
}

<ul id="inputList">
  <li>
    <label for="username">Enter User Name:</label>
    <input type="text" id="username" />
  </li>
  <li>
    <label for="password">Enter Password:</label>
    <input type="password" id="password" />
  </li>
</ul>

স্নিপেট প্রসারিত করুন

সম্পর্কিত

ডিওএম মিউটেশন ইভেন্টগুলিতে আরেকটি পোস্ট, inputইভেন্টগুলির ব্যবহারের পরামর্শ দিয়েছিল (ডিওএম মিউটেশন ইভেন্টগুলি এখন ডিওএম 4 স্তরে অবনতিযুক্ত এবং ডিওএম মিউটেশন পর্যবেক্ষকরা প্রতিস্থাপন করেছেন)।

দাবি অস্বীকার: নোট করুন যে inputইভেন্টগুলি বর্তমানে পরীক্ষামূলক , এবং সম্ভবত ব্যাপকভাবে সমর্থিত নয়।

Question 7

যেহেতু স্থানধারক ইনপুটটিতে অদৃশ্য হয়ে যায়, আপনি ব্যবহার করতে পারেন:

input:placeholder-shown{
    //rules for not empty input
}

Question 8

খাঁটি CSS সমাধান

input::-webkit-input-placeholder {
    opacity: 1;
    -webkit-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* Chrome <=56, Safari < 10 */
input:-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 4-18 */
input::-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 19-51 */
input:-ms-input-placeholder {
    opacity: 1;
    -ms-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* IE 10+ */
input::placeholder {
    opacity: 1;
    transition: opacity 0s;
    text-align: right;
}
/* Modern Browsers */

*:focus::-webkit-input-placeholder {
   opacity: 0;
   text-align: left;
}
/* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 4-18 */
*:focus::-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 19-50 */
*:focus:-ms-input-placeholder {
    opacity: 0;
    text-align: left;
}
/* IE 10+ */
*:focus::placeholder {
    opacity: 0;
    text-align: left;
}
/* Modern Browsers */

input:focus {
    text-align: left;
}

Question 9

আর একটি খাঁটি সিএসএস সমাধান

.form{
  position:relative;
  display:inline-block;
}
.form input{
  margin-top:10px;
}
.form label{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    transition:all 1s ease;
}
input:not(:placeholder-shown) + label{
    top:-10px;
    opacity:1;
}

<div class="form">
    <input type="text" id="inputFName" placeholder="Firstname">
    <label class="label" for="inputFName">Firstname</label>
</div>
<div class="form">
    <input type="text" id="inputLName" placeholder="Lastname">
    <label class="label" for="inputLName">Lastname</label>
</div>

স্নিপেট প্রসারিত করুন

Question 10

এটি আধুনিক ব্রাউজারগুলিতে কাজ করা উচিত:

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

এটি মান বৈশিষ্ট্যযুক্ত সমস্ত ইনপুট নির্বাচন করে এবং তারপরে তাদের মধ্যে খালি মান সহ ইনপুটগুলি নির্বাচন করে।

Question 11

input:not([value=""])

এটি কাজ করে কারণ যখন খালি স্ট্রিং না থাকে কেবল তখনই আমরা ইনপুট নির্বাচন করি।

Question 12

input:not(:invalid){
 border: 1px red solid;
}

// or 

input:not(:focus):not(:invalid){
 border: 1px red solid;
}