সিএসএসের সাথে পঠনযোগ্য বৈশিষ্ট্যকে কীভাবে স্টাইল করবেন?

Question

ক্ষেত্রগুলি অক্ষম করতে আমি বর্তমানে পঠনযোগ্য = "পঠনযোগ্য" ব্যবহার করছি। আমি এখন সিএসএস ব্যবহার করে বৈশিষ্ট্যটি স্টাইল করার চেষ্টা করছি। আমি ব্যবহার করার চেষ্টা করেছি

input[readonly] {
/*styling info here*/
}

তবে এটি কোনও কারণে কাজ করছে না। আমি চেষ্টাও করেছি

input[readonly='readonly'] {
/*styling info here*/
}

এটিও কাজ করে না।

আমি কীভাবে সিএসএসের মাধ্যমে পঠনযোগ্য বৈশিষ্ট্যকে স্টাইল করতে পারি?

Comments

input[readonly]কাজ করা উচিত. এটি আপনার স্টাইলশিটে অন্য কোথাও আরও নির্দিষ্ট নির্বাচক দ্বারা উপেক্ষা করা হচ্ছে না তা নিশ্চিত করুন।

— বোল্টক্লক

যদি আপনি অক্ষম করতে চান, তবে অক্ষম বৈশিষ্ট্যটি ব্যবহার করুন এবং কেবল পঠনযোগ্য নয়

— সোভেন বিদার

@ সোভেনবিডার রিডোনলি এবং অক্ষমদের পুরোপুরি আলাদা আচরণ রয়েছে। অক্ষম ক্ষেত্রগুলি না থাকলে ফর্ম জমা দেওয়ার জন্য সার্ভারে পাঠানো কেবল ক্ষেত্রগুলি while

— নরেন

input[readonly='readonly']আপনি যদি HTML ব্যবহার করেন তবেই <input readonly="readonly">উদাহরণস্বরূপ কাজ করবে না <input readonly>। input[readonly]দুটোই মিলে যাওয়া উচিত

— ম্যাথিয়াস বাইনেস

!importantওভাররাইড করার কাজ করা উচিত, যদি না আপনিও !importantসেটিং ক্লাসে না থাকেন?

— ম্যাট কে

Answer 1

input[readonly]
{
    background-color:blue;
}

https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

Comments

input[readonly]পরিবর্তে আপনার ব্যবহার করা উচিত readonlyযেমন একটি বুলিয়ান বৈশিষ্ট্য যা নির্দিষ্ট মান রাখার জন্য ডিজাইন করা হয়নি।

— BoltClock

নিবন্ধন করুন দয়া করে নীচের উত্তরে রেজোলিউশনটি দেখুন।

— পাল আর

আমি কীভাবে এটি আবার লেখার যোগ্য করতে পারি? শুধু ক্লাস শৈলী অপসারণ?

— রেনারো সান্টোস

@ রেনারোসান্টোস একটি এইচটিএমএল পরিবর্তন শুরু করেছেন। readonly="readonly"আপনার inputউপাদান থেকে সরান ।

— কর্ট 16

ডাব্লু / আই 7 আপনি এখনও jQuery এর সাথে নির্বাচক ব্যবহার করতে পারেন

— ডাব্লু

Answer 2

নোট করুন যে আপনি এইচটিএমএল textarea[readonly="readonly"]সেট করে থাকলে readonly="readonly"তা কাজ করে তবে আপনি জাভাস্ক্রিপ্টের মাধ্যমে বা এর মাধ্যমে readOnly-ট্রিবিউট সেট করলে এটি কার্যকর হয় না ।true"readonly"

সিএসএস নির্বাচক কাজ করার জন্য যদি আপনি readOnlyজাভাস্ক্রিপ্ট সেট করে থাকেন তবে আপনাকে নির্বাচক ব্যবহার করতে হবে textarea[readonly]।

ফায়ারফক্স 14 এবং ক্রোম 20 এ একই আচরণ।

নিরাপদে থাকার জন্য, আমি উভয় নির্বাচক ব্যবহার করি।

textarea[readonly="readonly"], textarea[readonly] {
...
}

Comments

আপনি কেবল textarea[readonly]পরিবর্তে ব্যবহার করতে পারেন - প্রত্যেকটি textarea[readonly="readonly"]এটির সাথে মিলে যাওয়ার গ্যারান্টিযুক্ত।

— BoltClock

Answer 3

নিরাপদ থাকতে আপনি উভয় ব্যবহার করতে পারেন ...

input[readonly], input[readonly="readonly"] {
    /*styling info here*/
}

পঠনযোগ্য বৈশিষ্ট্য হ'ল "বুলিয়ান বৈশিষ্ট্য", যা ফাঁকা বা "পঠনযোগ্য" (একমাত্র বৈধ মান)। http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

আপনি যদি jQuery এর .prop('readonly', true)ফাংশনের মতো কিছু ব্যবহার [readonly]করছেন .attr("readonly", "readonly")তবে আপনার প্রয়োজন শেষ হবে , আপনি যদি ব্যবহার করছেন তবে আপনার প্রয়োজন হবে [readonly="readonly"]।

---

সংশোধন: আপনার কেবল ব্যবহার করা দরকার input[readonly]। input[readonly="readonly"]রিডানড্যান্ট সহ । Https://stackoverflow.com/a/19645203/1766230 দেখুন

Answer 4

এখানে প্রচুর উত্তর, কিন্তু আমি ব্যবহার করি নি এমনটি দেখেনি:

input[type="text"]:read-only { color: blue; }

সিউডো সিলেক্টারে ড্যাশটি নোট করুন। যদি ইনপুট হয় তবে readonly="false"এটিও তা ধরবে যেহেতু এই নির্বাচকটি মান নির্বিশেষে পঠনের জন্য উপস্থিতি ধরা দেয়। প্রযুক্তিগতভাবে falseচশমা অনুসারে অবৈধ, তবে ইন্টারনেট একটি নিখুঁত বিশ্ব নয়। যদি আপনার এই মামলাটি আবশ্যক হয় তবে আপনি এটি করতে পারেন:

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea একইভাবে কাজ করে:

textarea:read-only:not([read-only="false"]) { color: blue; }

মনে রাখবেন এইচটিএমএল এখন না শুধুমাত্র সমর্থন করে type="text", কিন্তু এই ধরনের একটি অন্যান্য পাঠগত ধরনের একটি হত্যা number, tel, email, date, time, url, ইত্যাদি প্রতিটি প্রয়োজন হবে নির্বাচক জোড়া যেতে পারে।

Comments

আমিও না। LOL হ্যাঁ, আপনি ঠিক বলেছেন! আপাতত :read-onlyএবং অন্যান্য পিচুয়েডো নির্বাচকদের ডাব্লু 3 সি স্ট্যান্ডার্ডে যুক্ত করা হয়েছে এবং আইই 10 প্রিভিউ 101547 এবং উচ্চতর ব্যবহার করা যেতে পারে।

— IAmNaN

Answer 5

এটি করার কয়েকটি উপায় রয়েছে।

প্রথমটি সর্বাধিক ব্যবহৃত হয়। এটি সমস্ত বড় ব্রাউজারে কাজ করে।

input[readonly] {
 background-color: #dddddd;
}

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

input[type="demo"]:read-only {
 background-color: #dddddd;
}

এটি প্রথমটির বিকল্প, তবে এটি সম্পূর্ণ ব্যবহার হয় না:

input:read-only {
 background-color: #dddddd;
}

:read-onlyনির্বাচক ক্রোম, অপেরা, এবং সাফারি সমর্থিত। ফায়ারফক্স ব্যবহার করে :-moz-read-only। আইই সমর্থন করে না:read-only নির্বাচককে ।

আপনি ব্যবহার করতে পারেন input[readonly="readonly"], তবে এটি input[readonly]আমার অভিজ্ঞতা থেকে অনেকটা একই ।

Answer 6

input[readonly], input:read-only {
    /* styling info here */
}

শোড একটি পঠনযোগ্য ইনপুট ক্ষেত্রের জন্য সমস্ত কেস কভার করে ...

Comments

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

— পিটার

এটি অদ্ভুত তবে কেবল ইনপুট [কেবলমাত্র

— পড়ার

Answer 7

কেবলমাত্র প্রথম অক্ষরকে মূলধন করুন

input[readOnly] {
      background: red !important;
    }

<input type="text" name="country" value="China" readonly="readonly" />

Answer 8

আপনি যদি আইডি দ্বারা ইনপুট নির্বাচন করেন এবং তারপরে input[readonly="readonly"]CSS তে ট্যাগ যুক্ত করেন তবে এরকম কিছু:

 #inputID input[readonly="readonly"] {
     background-color: #000000;
 }

ওটা কাজ করবে না. আপনাকে প্যারেন্ট ক্লাস বা আইডি একটি নির্বাচন করতে হবে তারপরে ইনপুট। কিছুটা এইরকম:

 .parentClass, #parentID input[readonly="readonly"] {
     background-color: #000000;
 }

কাজে নতুন টিকিটের জন্য অপেক্ষা করতে করতে আমার 2 সেন্ট: ডি

Comments

"আপনি যদি আইডি দ্বারা ইনপুট নির্বাচন করেন" - যা ওপি নয়, তবে এটি কীভাবে প্রাসঙ্গিক? এমনকি যদি এটি হয় তবে আপনি ভুল, আপনার কেবল বংশোদ্ভূত সংযুক্তি অপসারণ করা উচিত।

— কোয়ান্টিন

এএইচ ঠিক আছে মানে আপনি ইনপুট এর মতো কিছু টাইপ করতে হবে [কেবলমাত্র পাঠ্য = "পঠনযোগ্য"] # ইনপুটআইডি? / আমি বোকা .. আপনি ঠিক বলেছেন

— সফটওয়্যারপ্লে

Answer 9

সমস্ত ব্রাউজারে কাজ করতে নিম্নলিখিতটি ব্যবহার করুন:

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }

Comments

সুতরাং, আশা করি আপনার লক্ষ্যযুক্ত শ্রোতা 2% এর মধ্যে নেই।

— বক্কো

'লকড' ক্লাসটি কী অন্তর্ভুক্ত ??

— এডিটি

$ ( '। textBoxClass') addClass ( 'লক') 'লক' অন্তর্ভুক্ত করা হবে।

— পাল আর