পাঠ্য ইনপুট ক্ষেত্রগুলির জন্য সিএসএস নির্বাচক?

Question

সিএসএস নির্বাচক ব্যবহার করে আমি কীভাবে 'পাঠ্য' টাইপের ইনপুট ক্ষেত্রগুলিকে লক্ষ্য করতে পারি?

Answer 1

input[type=text]

বা, ফর্মের ভিতরে পাঠ্য ইনপুটগুলিতে সীমাবদ্ধ করতে

form input[type=text]

বা, নির্দিষ্ট আইনে আরও সীমিত করার জন্য, এটি ধরে নিয়েছে এটির আইডি রয়েছে myForm

#myForm input[type=text]

বিজ্ঞপ্তি: এটি আই 6 সমর্থন করে না, সুতরাং আপনি যদি আই 6 এর জন্য বিকাশ করতে চান তবে হয় আই 7.js ব্যবহার করুন (ইয়ে জিয়াং প্রস্তাবিত হিসাবে) বা আপনার সমস্ত পাঠ্য ইনপুটগুলিতে ক্লাস যুক্ত করা শুরু করুন।

তথ্যসূত্র: http://www.w3.org/TR/CSS2/selector.html#attribute-setectors

---

যেহেতু এটি নির্দিষ্ট করা হয়েছে যে ডিফল্ট বৈশিষ্ট্য মানগুলি অ্যাট্রিবিউট সিলেক্টরসগুলির সাথে সর্বদা বাছাইযোগ্য না হয়, তাই পাঠ্য ইনপুটগুলি যেভাবে রেন্ডার করা হয় সেগুলি মার্কআপের অন্যান্য ক্ষেত্রে কাভার করার চেষ্টা করতে পারে:

input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'

প্রকারটি সংজ্ঞায়িত হওয়ার পরেও এটি কেসটি ছেড়ে দেয়, তবে এটির একটি অবৈধ মান রয়েছে এবং এটি এখনও = "পাঠ্য" টাইপে ফিরে আসে। কভার করার জন্য আমরা সমস্ত ইনপুট নির্বাচন করতে পারি যা অন্যান্য পরিচিত ধরণেরগুলির মধ্যে একটি নয়

input:not([type=button]):not([type=password]):not([type=submit])...

তবে এই নির্বাচকটি বেশ হাস্যকর হবে এবং সম্ভাব্য প্রকারের তালিকাটি এইচটিএমএলে নতুন বৈশিষ্ট্য যুক্ত হওয়ার সাথে বাড়ছে।

দ্রষ্টব্য: :notছদ্ম-শ্রেণি কেবলমাত্র আইই 9 দিয়ে শুরু করে সমর্থনযোগ্য supported

Comments

প্রকৃত মানটির পরিবর্তে কিছু টিউটোরিয়াল ওয়েব সাইট উদ্ধৃত করার জন্য +1

— Vidime Vidas

ধন্যবাদ. আমি লক্ষ্য করেছি লোকেরা গুগল ... বা ডাব্লু 3 স্কুলগুলিতে পপ আপ হওয়া প্রথম জিনিসটির উদ্ধৃতি দেয়।

— অ্যালিন পুরকারু

হ্যাঁ, এটি বিরক্তিকর

— Vidime বিদাস

এটি আই 6 এ কাজ করে? ক্রস ব্রাউজার সমাধানের জন্য আমি ক্লাসগুলি যুক্ত করতে পছন্দ করি (। ইনপুট-পাঠ্য।। ইনপুট-জমা দিন, ইত্যাদি) এটি এইচটিএমএল বিকাশের জন্য সফল হয় তবে এটি সিএসএস এবং জাভাস্ক্রিপ্টকে কিছুটা সুন্দর করে তোলে।

— zzzzBov

@ মুবাশারআহমাদ আমি আমার উত্তরটি আপডেট করেছি এবং আপনি দেখতে পাচ্ছেন যে আপনি যদি আইই 9-র উপরে ব্রাউজারগুলি লক্ষ্য করে নিচ্ছেন কেবল তখনই একটি কার্যকারিতা রয়েছে।

— অ্যালিন পুরকারু

Answer 2

আপনি এখানে বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করতে পারেন:

input[type="text"] {
    font-family: Arial, sans-serif;
}

এটি আই 7 এবং এর উপরে সমর্থিত। আপনি যদি আই 6 সমর্থন করতে চান তবে এটির জন্য সমর্থন যুক্ত করতে আপনি আই 7.js ব্যবহার করতে পারেন ।

আরও তথ্যের জন্য দেখুন: http://references.sitepPoint.com/css/attributeselector

Comments

যত্ন নিন, সঠিক জেনেরিক ফন্ট-পরিবার sans-serif, না san-serif।

— ভোলকার ই।

Answer 3

আমি সাধারণত আমার প্রধান স্টাইলশীটে নির্বাচক ব্যবহার করি, তারপরে একটি ie6 নির্দিষ্ট .js (jquery) ফাইল তৈরি করুন যা সমস্ত ইনপুট ধরণের ক্ষেত্রে একটি শ্রেণি যুক্ত করে। উদাহরণ:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

এবং তারপরে ক্লাসগুলি ব্যবহার করে ie6 নির্দিষ্ট স্টাইলশিটে আমার স্টাইলগুলি সদৃশ করুন। এইভাবে আসল মার্কআপটি কিছুটা পরিষ্কার।

Comments

এটি খুব ধীর

— হিদিত রহমান

Answer 4

:textপ্রকারের পাঠ্য সহ সমস্ত ইনপুট নির্বাচন করতে আপনি নির্বাচক ব্যবহার করতে পারেন

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

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:textএকটি jQuery এক্সটেনশন এবং সিএসএস স্পেসিফিকেশনের অংশ নয়, কোয়েরি ব্যবহার করে: পাঠ্যটি দেশীয় ডিওএম ক্যোয়ারীসিলিটরআল () পদ্ধতি দ্বারা সরবরাহিত পারফরম্যান্স বৃদ্ধির সুবিধা নিতে পারে না। আধুনিক ব্রাউজারগুলিতে আরও ভাল পারফরম্যান্সের জন্য, [type="text"]পরিবর্তে ব্যবহার করুন। এই জন্য কাজ করবে IE6+।

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

সিএসএস

[type=text] // or input[type=text] 
{
    background: green;
}

Answer 5

আমার একটি টেবিল সারির ক্ষেত্রে ইনপুট প্রকারের পাঠ্য ক্ষেত্র ছিল। আমি কোড সহ এটি টার্গেট করছি

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}

Answer 6

@ আমির উপরে পোস্ট হিসাবে, আজকাল সবচেয়ে ভাল উপায় - ক্রস ব্রাউজার এবং আই 6 এর পিছনে রেখে যাওয়া - ব্যবহার করা

[type=text] {}

কেউ উল্লিখিত নিম্ন সিএসএস নির্দিষ্টতা ( কেন হয় যে গুরুত্বপূর্ণ ?) এ পর্যন্ত, [type=text] অতিরিক্ত বৈশিষ্ট্যগুলিও উপস্থিত রয়েছে 0,0,1,0 পরিবর্তে 0,0,1,1 সঙ্গে input[type=text]।

পারফরম্যান্স-ভিত্তিতে আর কোনও নেতিবাচক প্রভাব নেই।

V4.0.0 কে সাধারণ করুন, সুনির্বাচিত নির্বাচনের সুনির্দিষ্টতার সাথে মুক্তি পেয়েছে ।

Answer 7

বৈশিষ্ট্য নির্বাচনকারী সহ আমরা সিএসএসে ইনপুট ধরণের পাঠ্যকে লক্ষ্য করি text

input[type=text] {
background:gold;
font-size:15px;
 }

Answer 8

ইনপুট [টাইপ = টেক্সট]

এটি একটি ওয়েব পৃষ্ঠায় সমস্ত ইনপুট ধরণের পাঠ্য নির্বাচন করবে।

Answer 9

বৈশিষ্ট্য নির্বাচনকারীরা প্রায়শই ইনপুটগুলির জন্য ব্যবহৃত হয়। এটি গুণবাচক নির্বাচকদের তালিকা:

[শিরোনাম] শিরোনাম বৈশিষ্ট্যযুক্ত সমস্ত উপাদান নির্বাচন করা হয়েছে।

[শিরোনাম = কলা] সমস্ত উপাদান যার শিরোনাম বৈশিষ্ট্যের 'কলা' মান রয়েছে।

[শিরোনাম ~ = কলা] সমস্ত উপাদান যা শিরোনাম বৈশিষ্ট্যের মানতে 'কলা' ধারণ করে।

[শিরোনাম | = কলা] সমস্ত উপাদান যা শিরোনাম বৈশিষ্ট্যের মান 'কলা' দিয়ে শুরু হয়।

[শিরোনাম ^ = কলা] সমস্ত উপাদান যা শিরোনাম বৈশিষ্ট্যের মান 'কলা' দিয়ে শুরু হয়।

[শিরোনাম $ = কলা] সমস্ত উপাদান যা শিরোনাম বৈশিষ্ট্যের মান 'কলা' দিয়ে শেষ হয়।

[শিরোনাম * = কলা] সমস্ত উপাদানগুলির শিরোনামের গুণাবলীতে 'কলা' স্তরযুক্ত থাকে।

তথ্যসূত্র: https://kolosek.com/css-selectors/