সিএসএস ব্যবহার করে একটি খালি ইনপুট বাক্স মিলছে

Question

খালি ইনপুট বাক্সে আমি কীভাবে একটি শৈলী প্রয়োগ করব? যদি ব্যবহারকারী ইনপুট ক্ষেত্রে কিছু টাইপ করে তবে স্টাইলটি আর প্রয়োগ করা উচিত নয়। সিএসএস এ কি সম্ভব? আমি এটি চেষ্টা করেছি:

input[value=""]

Answer 1

যদি কেবল ক্ষেত্র থাকে তবে 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>

JsFizz এ লাইভ দেখুন

বা ব্যবহার #foo-thing:invalidকরে উপেক্ষা করুন (@ স্যামগুডির কাছে ক্রেডিট)

Comments

.. বা ব্যবহার করে

— অবহেলা করুন

আমি একই জিনিস চাই, তবে আমার ক্ষেত্রের প্রয়োজন নেই। এটা করার কোন উপায় আছে?

— জাহিদুল ইসলাম রুহেল

এটি উজ্জ্বল :)

— ক্রিসকডজী

@ জাহিদুল ইসলাম ইসলাম অবশ্যই এই উত্তরটি প্রথমটি হওয়া উচিত নয়। নিচে উত্তর দেখার stackoverflow.com/a/35593489/11293716

— sijanec

Answer 2

আধুনিক ব্রাউজারগুলিতে আপনি :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/

Comments

ওটা দারুন! খুব হেল্পফুল :)

— অবিচ্ছিন্ন

@ ট্রিক্সফোরওয়েব মনে হয় যে ইনপুট ট্যাগে উপস্থিত হওয়ার জন্য কোনও স্থানধারক বৈশিষ্ট্য (একটি মান সহ) প্রয়োজন। ক্রোমে পরীক্ষিত - নিশ্চিত নয় যে এটি সমস্ত ব্রাউজারের জন্য গণনা করে।

— বেরেন্ড

স্থানধারক বৈশিষ্ট্য সেট করতে হবে। যাইহোক আমরা স্থানধারক বৈশিষ্ট্যটিকে হোয়াইটস্পেস হিসাবে সেট করতে পারি।

— বার্সেলোনজাইক

মতে @Amanpreet caniuse.com/#search=placeholder , এই ইন্টারনেট 11 না করবে না কাজ হয় (অথবা এজ)।

— টিম ম্যালোন

মাইক্রোসফ্ট ব্রাউজারগুলিতে মোটেই সমর্থিত নয়: caniuse.com/#feat=css- placeholder

— shown

Answer 3

সিএসএসে কোনও নির্বাচক নেই যা এটি করে। গুণবাচক নির্বাচকরা গুণিত মানগুলি নয়, গুণকীর্তিগুলির সাথে মিল পান।

আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

Comments

যেহেতু পরে এই উত্তরটি সন্ধান করছেন তাদের জন্য: কোয়ান্টিন গণিত মানগুলি সম্পর্কে সঠিক, তবে এখানে রয়েছে: খালি নির্বাচক যা এখানে ব্যবহার করা যেতে পারে এবং এর যুক্তিসঙ্গত সমর্থন রয়েছে (আইই 8 বাদে এবং সমস্ত ব্রাউজারগুলি অনুসারে: w3schools.com/cssref/sel_empty.asp

— কোহেন

:emptyনির্বাচক কেবল খালি উপাদানগুলিতে কাজ করে, কেবলমাত্র সেই উপাদানগুলির মধ্যে যার মধ্যে খোলার এবং বন্ধ করার ট্যাগ থাকে যা ফাঁকা থাকে এবং একক ট্যাগ উপাদান যা সর্বদা খালি বিবেচিত হয়, উদাহরণস্বরূপ , এটি ইনপুট উপাদানগুলিতে ব্যবহার করা যাবে নাtextarea

— am05mhz

সত্য না. নীচে লকমোর উত্তর দেখুন। প্রয়োজনীয় স্ট্যাট্রিবিউট এবং এর সংমিশ্রণ: বৈধ বা: অবৈধ ছদ্ম নির্বাচক কেবল এটি অর্জন করে।

— voidstate

প্রশ্নটি জিজ্ঞাসা করার সময় এটি সঠিক উত্তর ছিল। প্রয়োজনীয় বৈশিষ্ট্যটি কেবল ২০১১ সালে ক্রোম এবং ফায়ারফক্সে উপলভ্য ছিল এবং এই উত্তরটি ২০১০ সাল থেকে।

— সুজোর্ড

Answer 4

কোনও ক্ষেত্রের মান আপডেট করা 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">

Answer 5

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

সঙ্গে কাজ করে:

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

তবে কেউ টাইপ করা শুরু করার সাথে সাথে স্টাইলটি পরিবর্তন হবে না (এর জন্য আপনার জেএস প্রয়োজন)।

Comments

কোনও ক্ষেত্র সম্পাদনার পরে DOM এ মান বৈশিষ্ট্য পরিবর্তন করা হয়নি বলে নির্ভরযোগ্য। যাইহোক, যদি আপনি এই যত্নশীল চমৎকার কৌতুক যদি করবেন না - এবং সর্বশেষ কাজ করে সাফারি, ক্রোম, ff এবং ইন্টারনেট ...

— Dunc

প্রাক্তনটির সাথে মেলে, আপনি ব্যবহার করতে পারেন input[value=""], input:not([value])।

— Schism

Answer 6

সমর্থনকারী লিগ্যাসি ব্রাউজারের প্রয়োজন নেই, তাহলে আপনি একটি সমন্বয় ব্যবহার করতে পারে required, validএবং invalid।

এটি ব্যবহারের ভাল জিনিস হ'ল 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="[e-mail]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

রেফারেন্সের জন্য, জেএসফিডেল এখানে: http://jsfiddle.net/0sf6m46j/

Answer 7

$('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; }

Answer 8

এটি আমার পক্ষে কাজ করেছে:

এইচটিএমএল এর requiredজন্য, ইনপুট উপাদানটিতে বিশিষ্ট যুক্ত করুন add

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

সিএসএসের জন্য, :invalidখালি ইনপুটটিকে লক্ষ্য করতে নির্বাচকটি ব্যবহার করুন

input.my-input-element:invalid {

}

মন্তব্য:

• W3Schools.comrequired থেকে সম্পর্কে : "উপস্থিত থাকাকালীন , এটি নির্দিষ্ট করে যে ফর্মটি জমা দেওয়ার আগে একটি ইনপুট ক্ষেত্রটি পূরণ করতে হবে" "

Answer 9

এই প্রশ্নটি সম্ভবত কিছু সময় আগে জিজ্ঞাসা করা হয়েছিল, তবে আমি সম্প্রতি ক্লায়েন্ট-সাইড ফর্ম বৈধকরণের সন্ধানের জন্য এই বিষয়টিতে অবতীর্ণ হয়েছিলাম এবং :placeholder-shown সমর্থনটি আরও ভাল হচ্ছে, আমি ভেবেছিলাম নিম্নলিখিতটি অন্যকে সাহায্য করতে পারে।

ব্যবহার Berend এই CSS4 সিউডো-বর্গ ব্যবহার করার ব্যাপারে, আমি পরে ব্যবহারকারী এটিকে ভর্তি সমাপ্ত হয় শুধুমাত্র আলোড়ন সৃষ্টি একটি ফর্ম যাচাইকরণ তৈরি করতে সক্ষম হন।

এখানে কোডপেন সম্পর্কিত অ্যাডেমো এবং ব্যাখ্যা: https://codepen.io/johanmouchet/pen/PKNxKQ

Answer 10

আপনি যদি IE বা প্রাক-ক্রোমিয়াম এজকে সমর্থন না করে খুশি হন (যা আপনি এটি প্রগতিশীল বর্ধনের জন্য ব্যবহার করছেন তবে ভাল হতে পারে), আপনি :placeholder-shownবেরেন্ড যেমন বলেছিলেন তেমন ব্যবহার করতে পারেন । নোট করুন যে ক্রোম এবং সাফারির জন্য আপনার কাজ করার জন্য বাস্তবে আপনার খালি খালি স্থানধারক প্রয়োজন, যদিও কোনও স্থান কাজ করে।

*,
 ::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>

Answer 11

এটি আমার পক্ষে ইনপুটটিতে কোনও শ্রেণীর নাম যুক্ত করার এবং তারপরে CSS বিধি প্রয়োগ করার জন্য কাজ করেছিল:

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

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

Answer 12

আমি উত্তরগুলি নিয়ে অবাক হয়েছি খালি ইনপুট বাক্সগুলি পাওয়ার জন্য আমাদের স্পষ্ট বৈশিষ্ট্য রয়েছে, এই কোডটি একবার দেখুন

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

হালনাগাদ

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;
    }
}

Comments

:emptyকেবলমাত্র এমন উপাদানগুলিতে প্রয়োগ হয় যার কোনও সন্তান নেই। ইনপুটগুলিতে মোটেই শিশু নোড থাকতে পারে না তাই আপনার ইনপুট সর্বদা লাল সীমানার সাথে থাকবে। এছাড়াও এই মন্তব্যটি দেখুন

— heেগান

@ নাসেরহাদজলু আপনি কি এটি পরীক্ষা করেছেন? পরিবর্তনগুলি valueশিশু নোডের সংখ্যা পরিবর্তন করে না।

— jcuenod

@ jcuenod শিশু নোডের সংখ্যা বলতে কী বোঝ? আমি আপনার বক্তব্য পেলাম না

— নাসের হাডজলু

এক্সএমএল স্ট্রাকচারে নোডগুলি নেস্টেড হয় (যেমন <parent><child></child></parent>)। আপনার ঠিক আছে <input></input>এবং আপনি যা টাইপ করছেন <value><input><input value='stuff you type'></input>

— সেটির

তবে ওপি এটি অর্জন করার চেষ্টা করছে না।

— jcuenod

Answer 13

আমি বুঝতে পারি এটি একটি খুব পুরানো থ্রেড, তবে বিষয়গুলি কিছুটা পরিবর্তিত হয়েছে এবং এটি আমার সমস্যাটি স্থির করার জন্য প্রয়োজনীয় জিনিসগুলির সঠিক সংমিশ্রণটি খুঁজে পেতে আমাকে সহায়তা করেছিল। তাই আমি ভেবেছিলাম আমি যা করেছি তা ভাগ করে দেব।

সমস্যাটি হ'ল আমি একই সিএসএস পূরণ করতে চাইলে alচ্ছিক ইনপুটটির জন্য আবেদন করতে পেরেছি, যেমন আমার একটি পূরণের প্রয়োজন ছিল। সিএসএসো psuedo ক্লাসটি ব্যবহার করেছেন: বৈধ যা পূরণ না করা অবস্থায় alচ্ছিক ইনপুটটিতে CSS প্রয়োগ করে।

এইভাবেই আমি এটি স্থির করেছি;

এইচটিএমএল

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

সিএসএস

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