স্টাইলিং পাঠ্য ইনপুট ক্যারেট

Question

আমি একটি কেন্দ্রীভূত ক্যারেট স্টাইল করতে চান <input type='text'/>। বিশেষত, রঙ এবং বেধ।

Comments

ঠিক আছে, এটি <input type="text"/>আমার অনুমানের জন্য

— বেনজামিন ক্রাউজিয়ার

তিনি ক্যারেট, সম্পাদিত প্রশ্ন এবং ট্যাগগুলি স্টাইল করতে

— দেখছেন

গৃহীত উত্তর পরিবর্তন বিবেচনা করুন। সর্বশেষ সিএসএস পরিবর্তনগুলি দেওয়া, মাইকেল জ্যাস্পারের আপডেট হওয়া উত্তরটি অনেক বেশি উচ্চতর: স্ট্যাকওভারফ্লো.com

— বোয়াজ

Answer 1

আপনি যদি ওয়েবকিট ব্রাউজার ব্যবহার করছেন তবে আপনি পরবর্তী সিএসএস স্নিপেট অনুসরণ করে কেরেটের রঙ পরিবর্তন করতে পারেন। আমি নিশ্চিত না যে সিএসএসের সাহায্যে ফর্ম্যাটটি পরিবর্তন করা সম্ভব কিনা।

input,
textarea {
    font-size: 24px;
    padding: 10px;

    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ccc;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

এখানে একটি উদাহরণ: http://jsfiddle.net/8k1k0awb/

Comments

একটি চতুর হ্যাক, তবে ইমোজিগুলি কাজ করে না কারণ তারা কেবল ছায়ায় পূর্ণ হয়ে যায় 😭

— সিম্বোলো

হুম, ছায়াগুলি আমার ক্ষেত্রে কার্যকর হওয়ার জন্য প্রয়োজন নেই (ডেস্কটপ ক্রোম এবং এফএফ) - কেবল তখন ইনপুটটির পাঠ্য-পূরণের রঙ সম্পাদনা করুন।

— ভেলদা

Answer 2

'ক্যারেট' শব্দটি আপনি সন্ধান করছেন। যদিও আমি বিশ্বাস করি, এটি ব্রাউজার ডিজাইনের একটি অংশ, এবং CSS এর আঁকড়ে না।

যাইহোক, এখানে একটি আকর্ষণীয় লিখতে হয় জাভাস্ক্রিপ্ট এবং সিএসএস ব্যবহার করে ক্যারেট পরিবর্তন অনুকরণ করার রইল http://www.dynamicdrive.com/forums/showthread.php?t=17450 এটি আমার কাছে কিছুটা হ্যাকি বলে মনে হচ্ছে তবে সম্ভবত এর একমাত্র উপায় কাজটি সম্পাদন করা নিবন্ধের মূল বিষয়টি হ'ল:

আমাদের দর্শকের দেখার বাইরে স্ক্রিনে কোথাও একটি সরল টেক্সারিয়া থাকবে এবং যখন ব্যবহারকারী আমাদের "নকল টার্মিনাল" ক্লিক করবে তখন আমরা টেক্সারিয়ায় ফোকাস করব এবং যখন ব্যবহারকারী টাইপ শুরু করবেন তখন আমরা কেবল টেক্সারিয়ায় টাইপ করা ডেটা সংযোজন করব will আমাদের "টার্মিনাল" এ এবং এটিই।

এখানে কর্মের একটি ডেমো

---

2018 আপডেট

এখানে একটি নতুন সিএসএস সম্পত্তি রয়েছেcaret-color যা কোনও অঞ্চল inputবা ক্যারেটের ক্ষেত্রে প্রযোজ্য contenteditable। সমর্থনটি বৃদ্ধি পাচ্ছে তবে 100% নয় এবং এটি কেবল রঙকেই প্রভাবিত করে, প্রস্থ বা অন্যান্য ধরণের চেহারা নয় not

input{
  caret-color: rgb(0, 200, 0);
}

<input type="text"/>

Answer 3

: সিএসএস 3, সেখানে এখন হ্যাক বিদ্যমান উত্তর প্রস্তাবিত কোন ছাড়া এই কাজ করতে, একটি নেটিভ উপায় সম্পত্তি ।caret-color

ক্যারেটটি দিয়ে আপনি করতে পারেন এমন অনেকগুলি জিনিস রয়েছে যা নীচে দেখানো হয়েছে। এটি এমনকি অ্যানিমেটেড হতে পারে ।

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

caret-colorসম্পত্তি ফায়ারফক্স 55 থেকে সমর্থিত, এবং Chrome 60 সাপোর্ট সাফারি কারিগরী পূর্বরূপ এবং অপেরা (কিন্তু এজ এখনো) এ পাওয়া যায়। আপনি এখানে বর্তমান সমর্থন টেবিল দেখতে পারেন ।

Comments

আমাকে খোঁচা মারো। অবশ্যই, এই সম্পত্তিটি কেবল ফায়ারফক্সে কাজ করবে, কমপক্ষে আপাতত, এবং এপ্রিল 2017 পর্যন্ত মুক্তি পাবে না this এই পৃষ্ঠাটি দেখুন ।

— স্পাইডারস্ক্রিপ্ট

Answer 4

এখানে কিছু বিক্রেতার জন্য আপনি হয়ত আমাকে খুঁজছেন

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

আপনি বিভিন্ন রাজ্যের স্টাইলও করতে পারেন, যেমন ফোকাস

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

আপনি এটিতে যেমন নির্দিষ্ট ট্রানজিশনগুলিও করতে পারেন

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}

Comments

এটি প্লাচোল্ডার পাঠ্যটি স্টাইল করার জন্য দরকারী, তবে এটি ঝলকানো ক্যারেটটিকে ওপি রেফারেন্স করা স্টাইল করে না।

— ক্রেইগনিউইকির্ক

Answer 5

এইভাবে ওয়েবেকিট-টেক্সট-ফিল-কালারের পাশাপাশি রঙের সম্পত্তি ব্যবহার করা যথেষ্ট :

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }

<input type="text"/>

ওয়েবকিট ব্রাউজারগুলিতে (তবে আইওএস সাফারি নয়, যেখানে এখনও ক্যারেটের জন্য সিস্টেমের রঙ ব্যবহৃত হয়) এবং ফায়ারফক্সেও কাজ করে।

-উইবকিট-টেক্সট-ফিল-কালার সিএসএস সম্পত্তি পাঠ্যের অক্ষরের ভরাট রঙ নির্দিষ্ট করে । যদি এই সম্পত্তিটি সেট না করা থাকে তবে রঙের সম্পত্তিটির মান ব্যবহৃত হয়। MDN

সুতরাং এর অর্থ আমরা স্ট্যান্ডার্ড রঙের সম্পত্তি সহ পাঠ্য-পূরণ-রঙ এবং ক্যারেট রঙের সাথে পাঠ্য রঙ সেট করি। অসমর্থিত ব্রাউজারে ক্যারেট এবং পাঠ্যের ক্যারেটের রঙ একই থাকবে।