আমি কি একটি ইনপুট ক্ষেত্রে সিউডো-এলিমেন্টের আগে: বা পরে ব্যবহার করতে পারি?

Question

আমি :afterএকটি inputক্ষেত্রে সিএসএস সিউডো-এলিমেন্টটি ব্যবহার করার চেষ্টা করছি , তবে এটি কার্যকর হয় না। আমি যদি এটির সাথে এটি ব্যবহার করি তবে spanএটি ঠিক আছে।

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

এটি কাজ করে ("বুউ!" এর পরে এবং "আরও কিছু" এর আগে স্মাইলি রাখে)

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

এটি কাজ করে না - এটি শুধুমাত্র কিছুটা লাল রঙে রঙ করে তবে কোনও হাসি নেই।

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

আমি কি ভুল করছি? আমার কি অন্য সিউডো-সিলেক্টর ব্যবহার করা উচিত?

দ্রষ্টব্য: আমি spanআমার চারপাশে কোনও যোগ করতে পারি না input, কারণ এটি তৃতীয় পক্ষের নিয়ন্ত্রণ দ্বারা তৈরি করা হচ্ছে।

Comments

এইচটিএমএলটির উপর যদি আপনার সম্পূর্ণ নিয়ন্ত্রণ না থাকে border-colorতবে inputপরিবর্তে এর পরিবর্তনের চেষ্টা করুন । আমি এটি আরও মনোযোগ নিবদ্ধ করে মনে করি।

— ব্লেজমোনজার

Answer 1

:afterএবং :beforeকোনও উপাদানগুলিতে ইন্টারনেট এক্সপ্লোরার 7 এবং এর নীচে সমর্থিত নয়।

এটি ফর্ম উপাদান (ইনপুট) এবং চিত্র উপাদানগুলির মতো প্রতিস্থাপিত উপাদানগুলিতে ব্যবহার করার জন্য নয় ।

অন্য কথায় খাঁটি সিএসএস দিয়ে এটি অসম্ভব ।

তবে jquery ব্যবহার করে আপনি ব্যবহার করতে পারেন

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

.পিআইপি ডক্স

জাভাস্ক্রিপ্ট সহ আপনার বিষয়বস্তু সংযোজন। এটি সমস্ত ব্রাউজার জুড়ে কাজ করবে।

Comments

অ্যালেক্স, আমি আইই 8 এবং সর্বশেষ এফএফ ব্যবহার করছি, তাই আই 7 কোনও সমস্যা নয়। এর সীমাবদ্ধতা সম্পর্কিত যে কোনও নথিপত্রের জন্য আমি পৃথক ছিল: পরে, কিন্তু এটি খুঁজে পাইনি। w3.org/TR/CSS2/generate.html বলেছে যে এটি ডকুমেন্ট ট্রিতে বর্তমান নোডের পরে is োকানো হয়েছে যাতে এটি উভয় ক্ষেত্রেই কাজ করা উচিত।

— মাতরা

আপনি কেবল নিজের ব্যবহারের জন্য পৃষ্ঠাটি তৈরি না করা অবধি ইন্টারনেটের বিশাল শতাংশ সেই ব্রাউজারগুলি ব্যবহার করে। ডাব্লু 3 সি স্পেক এটিকে হ্যাঁ বলেছে; তবে আপনি যেমন জানেন যে ব্রাউজারগুলি তাদের নিজস্ব বর্ণনার ব্যাখ্যা ব্যাখ্যা করে। ব্যবহার: একটি ইনপুট নেওয়ার পরে কেবল অপেরা 9+ এ কাজ করবে, তবে তারা অভ্যন্তরীণভাবে ডিওএম তৈরির কারণে আইই, এফএফ, সাফারি বা ক্রোমে কার্যকর হয় না - আবার এটি খাঁটি সিএসএস দিয়ে করা যায় না।

— অ্যালেক্স

এপ্রিলে এটি ছিল কিনা তা আমি নিশ্চিত নই, তবে ওয়েবকিট :afterসাধারণভাবে সমর্থন করে যদিও এটি :beforeবা :afterইনপুটগুলিতে সমর্থন করে না ।

— কোরিউয়ার্ড

আমি যতক্ষণ ডাব্লু 3 সি :afterএবং :beforeসিউডো উপাদানগুলি বুঝতে পারি সেগুলি কেবল ধারক উপাদানগুলিতেই রাখা যেতে পারে। কেন? তারা যোগ করতে থাকার কারণে ভিতরে সেই বিশেষ উপাদান। inputএকটি ধারক নয়। buttonউদাহরণস্বরূপ তাই আপনি এগুলি রাখতে পারেন। আশানুরূপ কাজ করে। নির্দিষ্টকরণ আসলে বলেছেন: আগে ও একটি উপাদান এর ডকুমেন্ট গাছ বিষয়বস্তু পর এটা স্পষ্টভাবে বলেছেন বিষয়বস্তু । সুতরাং একটি উপাদান একটি ধারক হতে হবে।

— রবার্ট কোরিটনিক

পরবর্তী উত্তরটি উপায় ভাল .. আই IE (যারা যত্নশীল) এবং jQuery (খারাপ ধারণা) সম্পর্কে কথা বলার চেয়ে প্রকৃত কারণ দেয়

— রোয়ান

Answer 2

:before এবং :after একটি ধারক ভিতরে রেন্ডার

এবং <ইনপুট> এ অন্যান্য উপাদান থাকতে পারে না।

---

ছদ্ম-উপাদানগুলি কেবল ধারক উপাদানগুলিতে সংজ্ঞায়িত করা যায় (বা আরও ভাল বলা কেবল সমর্থিত হয়)। কারণ তারা অনুষ্ঠিত হয় মধ্যে একটি শিশু উপাদান হিসেবে ধারক নিজেই।inputঅন্যান্য উপাদান থাকতে পারে না তাই তারা সমর্থিত নয়। একটি buttonঅন্যদিকে যে এছাড়াও একটি ফর্ম উপাদান, তাদের সমর্থন করা হয়েছে কারণ এটি অন্য উপ-উপাদানের একটি ধারক না।

আপনি যদি আমাকে জিজ্ঞাসা করেন, কিছু ব্রাউজার যদি যদি এই দুটি সিউডো-উপাদানগুলি অ-ধারক উপাদানগুলিতে প্রদর্শন করে তবে এটি একটি বাগ এবং একটি মানক নয়। নির্দিষ্টকরণ উপাদান উপাদান সম্পর্কে সরাসরি কথা বলে ...

ডাব্লু 3 সি স্পেসিফিকেশন

যদি আমরা সাবধানতার সাথে স্পেসিফিকেশনটি পড়ি তবে এটি প্রকৃতপক্ষে বলে যে এগুলি একটি উপাদানযুক্ত উপাদানটির ভিতরে in োকানো হয়েছে:

লেখকগুলি সিউডো-উপাদানগুলির পরে: এর আগে এবং: এর সাথে উত্পন্ন সামগ্রীর স্টাইল এবং অবস্থান নির্দিষ্ট করে। তাদের নামগুলি ইঙ্গিত দেয় যে, সিউডো-উপাদানগুলির পরে এবং এর আগে: সিউডো-এলিমেন্টগুলির পরে কোনও উপাদানের ডকুমেন্ট ট্রি সামগ্রীর আগে এবং পরে সামগ্রীর অবস্থান নির্দিষ্ট করা হয়। এই ছদ্ম-উপাদানগুলির সাথে একত্রে 'সামগ্রী' বৈশিষ্ট্যটি whatোকানো হয়েছে তা নির্দিষ্ট করে specif

দেখা? একটি উপাদান এর নথি গাছের বিষয়বস্তু । যেহেতু আমি এটি বুঝতে পারি এটি একটি ধারক মধ্যে means

Comments

+1 গৃহীত উত্তরের চেয়ে অনেক বেশি ভাল। মানকটির নিজের স্পষ্ট ব্যাখ্যার জন্য ধন্যবাদ। এত [required]::before { content "*"; color: red; }

— কিছুর

টিপ: আপনার যদি ঠিক একটি জমা দেওয়া ইনপুট এর মতো সমস্যা হয় তবে পরিবর্তে <input type="submit" value="Send"/>ব্যবহার <button type="submit">Send</button>করুন। উপস্থাপনাটি অভিন্ন তবে এটি <button>একটি ধারক এবং এইভাবে সমর্থন করে :beforeএবং :after।

— ফ্লু

কি হবে <hr />? আমি ভেবেছিলাম এটি কোনও ধারক উপাদান নয়, তবে এটি রেন্ডার :afterএবং :before jsfiddle.net/Uf88j/1

— মৃত্যুবরণ

@ ডেথলক: এটি সত্যই আকর্ষণীয়। আমি বলব এটি অবশ্যই একরকম অসঙ্গতি হওয়া উচিত এবং আমি ক্রস ব্রাউজার বা ক্রস সংস্করণগুলিতে এটির উপর নির্ভর করব না ... এইচআর কোনও ধারক উপাদান নয় তাই ছদ্ম উপাদানগুলির জন্য অনুমতি দেওয়া উচিত নয়। এমনকি ডাব্লু 3 সি স্ট্যান্ডার্ড বলছে যে এটি কোনও সামগ্রীকে অনুমতি দেয় না । এবং যদি আপনি জন্য চেক অকার্যকর উপাদান আপনি দেখতে পারেন যে এই উপাদান যে কোনো পরিস্থিতির অধীন কোনো সামগ্রী থাকবে না। সিউডো উপাদানগুলি সামগ্রী হিসাবে তাই ভবিষ্যতের ব্রাউজার সংস্করণগুলি প্রদর্শন করতে ব্যর্থ হওয়ার প্রত্যাশা করে।

— রবার্ট কোরিটনিক

" : পূর্বে এবং: ধারকটির ভিতরে রেন্ডার করার পরে " সিউডো উপাদানগুলি আসার পরে এবং: পরে " সামগ্রীর আগে এবং পরে " " ধারকটির "শুরু বা শেষে" নয়। চশমা কোনও ধারক উল্লেখ করে না । এর মতো ট্যাগ সহ pএবং h1, লিখিত সামগ্রীটি ট্যাগের মধ্যে থাকে, তাই ভিতরে / পরে ভিতরে উপস্থিত হওয়ার আগে / পরে। inputএবং এর মতো উপাদানগুলির সাথে hr: আগে এবং: পরে এখনও সামগ্রীর আগে বা পরে উপস্থিত হতে পারে, তবে কোনও ধারক জড়িত নেই (বিশেষত এর জন্য input)। ইনপুট: চেক করা: আগে CSS এর মাধ্যমে চেকবক্সগুলি চেক করা হচ্ছে তা নির্দেশ করতে ব্যাপকভাবে ব্যবহৃত হয়।

— রেডলি সাস্টায়ার

Answer 3

অদ্ভুতভাবে, এটি কিছু ধরণের ইনপুট নিয়ে কাজ করে। কমপক্ষে ক্রোমে,

<input type="checkbox" />

ঠিক মত কাজ করে

<input type="radio" />

এটি ঠিক type=textএবং কিছু অন্যান্য কাজ করে না।

Comments

@ এনিভস, এটি আমার জন্য ক্রোমিয়ামে কাজ করেছিল, তবে ফায়ারফক্সে নয়।

— কেসিআরপি

Answer 4

এখানে আরও একটি পদ্ধতি রয়েছে (ধরে নেওয়া আপনার এইচটিএমএলটির নিয়ন্ত্রণ রয়েছে): ইনপুটটির <span></span>পরে খালি ডান যুক্ত করুন এবং সিএসএস ব্যবহার করে লক্ষ্য করুনinput.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>

আমি এঙ্গুলারজেএস-এ এই পদ্ধতির ব্যবহার করছি কারণ এটি উপাদান গঠনে .ng-invalidএবং <input>ফর্মটিতে স্বয়ংক্রিয়ভাবে ক্লাস যুক্ত করবে, তবে এটিতে নয় <label>।

Comments

এটা হোভার কর্ম যোগ করতে চান অনুমতি দেয়: input:hover+span:after{color: blue}। ভোট দিন।

— ক্রেসোস্কি

এই উত্তরের কেন এত কিছু আপগেট আছে? আমি মনে করি তাত্ত্বিক জ্ঞান গুরুত্বপূর্ণ তবে এটি সমস্যার সমাধান করে।

— জর্জিফপাস্টার

সমস্যাটি সমাধান করার জন্য সাথে যেতে ভাল বিকল্প।

— জেসেটার

Answer 5

:beforeএবং :afterএকটি ধারক ভিতরে প্রয়োগ করা হয়, যার অর্থ আপনি এন্ড ট্যাগ সহ উপাদানগুলির জন্য এটি ব্যবহার করতে পারেন।

এটি স্ব-সমাপ্তি উপাদানগুলির জন্য প্রযোজ্য নয়।

পার্শ্ব নোটে, স্ব-সমাপনকারী উপাদানগুলি (যেমন img / hr / ইনপুট) এগুলি 'প্রতিস্থাপিত উপাদানগুলি' হিসাবে পরিচিত, কারণ তারা তাদের নিজ নিজ সামগ্রীর সাথে প্রতিস্থাপন করা হয়েছে। "বাহ্যিক অবজেক্টস" একটি ভাল শব্দটির অভাবের জন্য। এখানে একটি ভাল পড়া

Comments

এই উত্তরটি সঠিক, সংক্ষিপ্ত এবং গুরুত্বপূর্ণ প্রসঙ্গ সরবরাহ করে। ইমো, শীর্ষে থাকা উচিত।

— পল

Answer 6

আমি 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
}

কোডেপেনে দেখুন

Answer 7

আপনি একটি ইনপুট উপাদানগুলিতে সিউডো উপাদান রাখতে পারবেন না, তবে ছায়া উপাদান রাখতে পারেন যেমন একটি স্থানধারকের মতো!

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

এটি অন্যান্য ব্রাউজার, ব্যবহারে কাজ করতে :-moz-placeholder, ::-moz-placeholderএবং :-ms-input-placeholder বিভিন্ন নির্বাচকরা । নির্বাচকদের গোষ্ঠীভুক্ত করতে পারবেন না, কারণ কোনও ব্রাউজার যদি নির্বাচককে সনাক্ত না করে তবে পুরো বিবৃতিটি বাতিল করে।

আপডেট : উপরের কোডটি প্রি-প্রসেসর ব্যবহার ছাড়াই কেবল সিএসএস প্রি-প্রসেসর (এসএএসএস, কম ...) দিয়ে কাজ করে:

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

Comments

নিস! নোট করুন যে স্থানধারক সিউডো উপাদানটির সম্পত্তির সীমাবদ্ধতা রয়েছে: রঙ, ব্যাকগ্রাউন্ড, শব্দ-ব্যবধান, বর্ণ-ফাঁক, পাঠ্য-সজ্জা, উল্লম্ব-সারিবদ্ধ, পাঠ্য-রূপান্তর, লাইন-উচ্চতা, পাঠ্য-ইনডেন্ট, অস্বচ্ছতা। দেখুন css-tricks.com/almanac/selectors/p/placeholder

— হেনরি

ইঙ্গিতটির জন্য ধন্যবাদ। কেবল মনে রাখবেন যে সিউডো-এলিমেন্টের ভিতরে থাকা সমস্ত জিনিস অদৃশ্য হয়ে যাবে যখন ব্যবহারকারী দ্বারা ইনপুট বাক্সটি পূরণ করা হবে। আমার মতো আপনিও চাইলে glyphicon-searchমার্কআপটিকে স্পর্শ না করেই যদি এটি প্রদর্শন করতেন তবে এটি একটি ইউএক্স সমস্যা ।

— ডেভি লিমা

কেন এটি আর কাজ করে না সে সম্পর্কে কিছু প্রসঙ্গ: bugs.chromium.org/p/chromium/issues/detail?id=582301

— অলিভার জোসেফ অ্যাশ

Answer 8

ছদ্ম উপাদান পছন্দ :after, :beforeধারক উপাদানের জন্য শুধুমাত্র। শুরু মত একটি স্থানে বন্ধের উপাদানসমূহ <input/>, <img>ইত্যাদি ধারক উপাদান এবং অত: পর ছদ্ম উপাদান সমর্থিত নয় নয়। আপনি একবার ধারক উপাদান যেমন একটি সিউডো উপাদান প্রয়োগ করেন <div>এবং আপনি কোডটি পরিদর্শন করেন (চিত্রটি দেখুন) আপনি আমার অর্থ বোঝাতে পারবেন। আসলে ছদ্ম উপাদানটি ধারক উপাদানটির ভিতরে তৈরি করা হয়। <input>বা এর ক্ষেত্রে এটি সম্ভব নয়<img>

Answer 9

খাঁটি সিএসএসে একটি কার্যক্ষম সমাধান:

কৌশলটি ধরা যাক পাঠ্যক্ষেত্রের পরে কোনও ডোম উপাদান রয়েছে।

/*
 * 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% সিএসএস এবং 0% jQuery বলে মনে হচ্ছে।

Comments

input#myTextField ~ span:before {অনেক ভালো, কিন্তু বিঘত একটি বর্গ সত্যিই মত আরো স্পষ্ট হতে থাকা উচিত .tickবা.icon

— Val,

Answer 10

আমি এই পোস্টটি পেয়েছি কারণ আমার একই সমস্যা ছিল, এটি ছিল আমার জন্য সমাধানের সমাধান। ইনপুটটির মান প্রতিস্থাপনের বিপরীতে কেবল এটি সরিয়ে ফেলুন এবং একেবারে একই আকারের পিছনে একটি স্প্যান স্থাপন করুন, স্প্যানটিতে :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>

Comments

+1 - আপনি যদি কোনও প্লাগইন বা ফ্রেমওয়ার্ক ব্যবহার করেন যা স্বয়ংক্রিয়ভাবে উপাদানটিতে বৈধতা ক্লাস যুক্ত করে তবে প্যারেন্ট লেবেলে নয় তবে এই সমাধানটি ভালভাবে কাজ করে।

— ব্লেজমোনজার

Answer 11

এখানে সবচেয়ে বড় ভুল বোঝাবুঝি শব্দগুলির অর্থ beforeএবং after। তারা না উপাদান নিজেই পড়ুন, কিন্তু বিষয়বস্তু উপাদানের ক্ষেত্রে। সুতরাং element:beforeবিষয়বস্তু সম্মুখে ও element:afterবিষয়বস্তু খুঁজছে, কিন্তু উভয় এখনও মূল উপাদান ভিতরে হয়।

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

বাইরে উল্লেখ করে কোনও ছদ্ম উপাদান নেই ।

অন্য এক মহাবিশ্বে এই ছদ্ম উপাদানগুলিকে এই পার্থক্য পরিষ্কার করার জন্য অন্য কিছু বলা হতে পারে। এবং কেউ হয়ত ছদ্ম উপাদানটির প্রস্তাবও দিয়েছিলেন যা প্রকৃতপক্ষে উপাদানটির বাইরে। এখনও পর্যন্ত, এই মহাবিশ্বের ক্ষেত্রে এটি হয় না।

Comments

আপনার অর্থ কী তা আমি বুঝতে পারি না তবে আমি যদি করি তবে সিউডো উপাদানগুলি এইচআর এ কাজ করে? jsfiddle.net/demetriad/o49yn5hq

— ক্রিস

@ ক্রিস এটি আমার জন্য অবাক এবং অনুসন্ধানের জন্য কিছু অন্যের জন্য আসে। আমি মনে করি এটি একটি কোমলতা। hrসিএসএসের দৃষ্টিকোণ থেকে সবসময়ই অস্পষ্ট ছিল, যদিও আপনি রঙটি আলোচনার ক্ষেত্রে আরও দেখতে পান।

— ম্যাঙ্গো

Answer 12

সিএসএস ২.১ অনুচ্ছেদে একটি নোট অনুসারে , স্পেসিফিকেশনটি প্রতিস্থাপনকারী উপাদানগুলির (যেমন এইচটিএমএল-তে আইএমজি): এর আগে এবং পরে এর ইন্টারঅ্যাকশনটিকে পুরোপুরি সংজ্ঞায়িত করে না। ভবিষ্যতের নির্দিষ্টকরণে এটি আরও বিশদে সংজ্ঞায়িত হবে ” যদিও inputবাস্তবে আর কোনও প্রতিস্থাপনকারী উপাদান না হলেও মূল পরিস্থিতি পরিবর্তন হয়নি: এর প্রভাব :beforeএবং:after অনির্দিষ্ট এটা উপর এবং সাধারণত কোনো প্রভাব নেই।

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

Comments

এটি একটি মন্তব্য, উত্তর নয় - বরং দীর্ঘ মন্তব্য, তবে একটি মন্তব্য।

— ব্লেজমোনজার

@ ব্লাজমোনজার, প্রশ্নটি কী ছিল তা পুরোপুরি পরিষ্কার নয়, তবে যে কোনও ক্ষেত্রেই এই উত্তরটি গ্রহণযোগ্য উত্তর হিসাবে একই বিষয়টিকে সম্বোধন করেছে, তবে আরও সঠিক উপায়ে। উপাদানগুলির জন্য উত্পন্ন সামগ্রী ব্যবহার করা অসম্ভব নয় input, কেবল অনির্ধারিত এবং ব্রাউজার-নির্ভর।

— জুলকা কে। কোরপেলা 26'14

Answer 13

অন্যদের হিসাবে ব্যাখ্যা, inputগুলি ধরণ-প্রতিস্থাপিত হয় অকার্যকর উপাদান, তাই অধিকাংশ ব্রাউজার আপনাকে উৎপন্ন করার অনুমতি দেয় না ::beforeকিংবা ::afterতাদের মধ্যে সিউডো-উপাদান।

যাইহোক, সিএসএস ওয়ার্কিং গ্রুপ স্পষ্টভাবে অনুমতি দেওয়ার ক্ষেত্রে ::beforeএবং বিবেচনার ::afterক্ষেত্রে বিবেচনা inputকরছে appearance: none।

Https://lists.w3.org/ আর্কাইভস / প্রজাতন্ত্র / www- style / 2016 মার্চ / 0190 এইচটিএমএল থেকে ,

সাফারি এবং ক্রোম উভয়ই তাদের ফর্ম ইনপুটগুলিতে সিউডো-উপাদানগুলিকে অনুমতি দেয়। অন্যান্য ব্রাউজারগুলি তা করে না। আমরা এটি সরিয়ে নেওয়ার দিকে নজর দিয়েছি, তবে ব্যবহার-কাউন্টার এটি ব্যবহার করে পৃষ্ঠাগুলির 0 .07% রেকর্ড করছে, যা আমাদের সর্বোচ্চ অপসারণের দ্বার 20x 20

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

Answer 14

পরবর্তী চেষ্টা করুন:

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>

Answer 15

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

ওয়ার্কিং ফিডল

সিউডো-উপাদান হিসাবে একটি ইনপুটটির ভিতরে ডলারের চিহ্ন: http://jsfiddle.net/kapunahele/ose4r8uj/1/

এইচটিএমএল:

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

সিএসএস:

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

Comments

দুর্দান্ত কৌশল, তবে আপনি ইনপুটটিকে "চালিয়ে" যেতে একটি স্টাইলাইজড ডিভ তৈরি করতে পারেন। এই ফ্রেডটি দেখুন jsfiddle.net/ose4r8uj/31 তবে আপনি এটি বুটস্ট্র্যাপ ব্যবহার করে আরও সহজ করতে পারেন: getbootstrap.com/css/#forms-control-ifications "" বিকল্প আইকন সহ "অংশটি দেখুন। যদিও মূল প্রশ্নের সাথে এর কোন যোগসূত্র নেই।

— ভিক্টর ইভেনস

এফওয়াইআই

— ইনপুটটির

Answer 16

আপনি যদি কোনও ইনপুট উপাদানটি: এর আগে এবং: পরে এর সাথে স্টাইল করার চেষ্টা করছেন তবে আপনি নিজের সিএসএস স্ট্যাকের অন্যান্য স্প্যান, ডিভ, এমনকি কোনও উপাদানগুলির প্রভাব নকল করার চেষ্টা করছেন ।

যেমন রবার্ট কোরিটনিকের উত্তরটি উল্লেখ করেছে,: আগে এবং: কেবল কেবল ধারক উপাদানগুলিতে প্রয়োগ করা যেতে পারে এবং ইনপুট উপাদানগুলি পাত্রে নয়।

তবুও, এইচটিএমএল 5 বোতামের উপাদানটি প্রবর্তন করে যা একটি ধারক এবং একটি ইনপুট [টাইপ = "সাবমিট | রিসেট"] উপাদানটির মতো আচরণ করে।

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

Comments

এইচটিএমএল 4 আসলে <বাটন> উপাদানটি উপস্থাপন করেছে।

— মিস্টার লিস্টার

Answer 17

সারসংক্ষেপ

এটি দিয়ে কাজ করে না <input type="button">, তবে এটি দিয়ে ভাল কাজ করে <input type="checkbox">।

ফিডল : http://jsfiddle.net/gb2wY/50/

এইচটিএমএল :

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

সিএসএস :

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

Answer 18

:beforeএবং :afterকেবলমাত্র নোডগুলির জন্য কাজ করে যা শিশু নোড থাকতে পারে যেহেতু তারা প্রথম বা শেষ নোড হিসাবে একটি নতুন নোড .োকায়।

Answer 19

আমি দেখতে পেয়েছি যে আপনি এটি এটির মতো করতে পারেন:

.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>

আপনার একটি ডিভ প্যারেন্ট থাকা দরকার যা প্যাডিং এবং পরে: নেয়। প্রথম পিতামাতার আপেক্ষিক হওয়া দরকার এবং দ্বিতীয় ডিভটি অবশ্যই নিখুঁত হওয়া উচিত যাতে আপনি পরবর্তীটির অবস্থান নির্ধারণ করতে পারেন।

Answer 20

এর পরিবর্তে আমার আর একটি ধারণা রয়েছে এটি ব্যবহার করুন:

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

Comments

প্রশ্নের লেখক স্পষ্টভাবে বলেছিলেন যে তারা এইচটিএমএল মার্কআপ পরিবর্তন করতে সক্ষম নয়। এই উত্তরটি বোঝা যায় না। সম্ভবত এটি সম্পাদিত, @ মরফিয়াসের পরিবর্তে ডাউনভোট হওয়া উচিত ছিল।

— প্লেক