একটি নির্বাচিত বাক্স স্টাইল করা সম্ভব? [বন্ধ]

Question

আমি একটি এইচটিএমএল নির্বাচন বাক্স পেয়েছি যা আমার স্টাইল করা প্রয়োজন। আমি কেবল সিএসএস ব্যবহার করতে পছন্দ করব তবে আমার যদি শূন্যস্থান পূরণ করতে jQuery ব্যবহার করতে পারি তবে।

যে কেউ একটি ভাল টিউটোরিয়াল বা প্লাগইন সুপারিশ করতে পারেন?

আমি জানি, গুগল, তবে আমি গত দুই ঘন্টা ধরে অনুসন্ধান করেছিলাম এবং আমার প্রয়োজনীয়তাগুলি পূরণ করে এমন কোনও কিছুই খুঁজে পাচ্ছি না।

এটি হওয়া দরকার:

• JQuery 1.3.2 সঙ্গে সামঞ্জস্যপূর্ণ
• প্রবেশযোগ্য
• বিচক্ষণ
• একটি নির্বাচিত বাক্সের প্রতিটি দিক স্টাইল করার ক্ষেত্রে সম্পূর্ণ কাস্টমাইজযোগ্য

কেউ কি এমন কিছু জানেন যা আমার চাহিদা মেটাবে?

Comments

আপনার মানে কি আপনি কাস্টমাইজযোগ্য ড্রপডাউন চান (জ্যাকুয়ারিতে অন্তর্নির্মিত), তাই না? কারণ নির্বাচিত বাক্সগুলি এমনকি ব্রাউজার অবজেক্ট নয় (এগুলি প্ল্যাটফর্ম অবজেক্ট) খুব সাধারণ, খুব কাঁচা, এবং আপনি এটির অনেকগুলি স্টাইল করতে পারবেন না (উদাহরণস্বরূপ আপনি সীমানাগুলি স্টাইল করতে পারবেন না)

— আয়শা

সুন্দর ব্যাখ্যা এবং ফর্ম্যাটিংয়ের জন্য +1!

— মনীশ

চয়ন করা উল্লেখযোগ্য তবে এটি খুব স্বনির্ধারিত নয় এবং এতে প্রচুর প্রকাশ্য সমস্যা রয়েছে। দেখতে ভাল লাগছে এবং ব্যবহার করুন, যদিও।

— একটি বেতনভুক্ত অহংকার '

@ আইয়্যাশ আপনি যা বলছেন তা বেশ কয়েকটি সিস্টেমে এমএসএইচটিএমএল (ইন্টারনেট এক্সপ্লোরার এবং বন্ধু) এবং ওয়েবকোয়ার (সাফারি) এর জন্য সত্য (অবশ্যই ম্যাক ওএস)। এটি গেকোর (ফায়ারফক্স এবং বন্ধুদের) পক্ষে সত্য নয়। সুতরাং আসল সমস্যাটি হ'ল আপনি selectক্রস ব্রাউজারের উপাদানগুলি স্টাইল করতে পারবেন না । তবে লোকেরা যদি পার্থক্য নিয়ে বেঁচে থাকতে রাজি হয় তবে আপনি এগুলি স্টাইল করতে পারেন - সীমানা সহ ।

— পয়েন্টেড ইয়ার্স

@ প্রস্তাবিতরা হ্যাঁ, ২০১২ সালে তারা পারে, তবে আমি অনুমান করছি যে 3 বছর আগে যখন আমি যা বলেছিলাম, আমি নিশ্চিত যে আমি তখনই একটি শট দিয়েছিলাম এবং এটি কার্যকর হয়নি

— আয়্যাশ

Answer 1

আমি সেখানে কিছু jQuery প্লাগইন দেখেছি যা <select>'গুলি <ol>' এর এবং <option>'এর ' এর থেকে রূপান্তর করে <li>, যাতে আপনি এটি CSS এর সাথে স্টাইল করতে পারেন। নিজের রোল করা খুব কঠিন হতে পারে না।

এখানে একটি: https://gist.github.com/1139558 (তিনি এখানে অভ্যস্ত, তবে দেখে মনে হচ্ছে সাইটটি ডাউন আছে))

এটি এর মতো ব্যবহার করুন:

$('#myselectbox').selectbox();

এটি পছন্দ করুন:

div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current { 
  background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

Comments

আমি প্রথমে এই সংস্করণটি চেষ্টা করেছিলাম তবে ডিআইভির যেখানে নির্বাচন করা বাক্স রয়েছে তার তুলনায় অবস্থান নেই। পরিবর্তে এটি শক্তভাবে বাম দিকে অবস্থিত।

আমি নিজে এটি ব্যবহার করিনি। এটির জন্য ডেমো ( brainfault.com/demo/selectbox/0.5 ) ভাল দেখাচ্ছে। অন্যান্য বাস্তবায়ন জন্য চারপাশে দেখুন। আমি জানি আমি আরও বেশ কয়েকটি প্লাগইন দেখেছি যা এটি করে।

— মার্ক এ। নিকোলোসি

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

— জোনাথন

404 - আয়না ছিল যেখানে কোন ধারণা?

— মোয়াক

কেবল সাবধান থাকুন যে বেশিরভাগ নির্বাচিত মেনু প্লাগইনগুলি স্ক্রিন পাঠকদের কাছে অ্যাক্সেসযোগ্য। এখনও কাজ করে না এমন একটি খুঁজে পায়নি।

— মারসি

Answer 2

আপডেট: ২০১৩ সাল পর্যন্ত আমি যে দুটি দেখতে পেয়েছি তা হ'ল:

• চয়ন করা - ঠাণ্ডা স্টাফ লোড, গিথুব উপর 7k + প্রহরী। (মন্তব্যে 'একটি পেইড নার্ড' উল্লেখ করেছেন)
• সিলেক্ট 2 - চয়েসন দ্বারা অনুপ্রাণিত, কৌণিক-ইউআই-এর অংশ চয়েসনে কয়েকটি দরকারী টুইট রয়েছে।

হ্যাঁ!

---

২০১২ সাল পর্যন্ত আমি খুঁজে পেয়েছি সবচেয়ে হালকা ও নমনীয় সমাধানগুলির মধ্যে একটি হ'ল ডিডি্ল্লিক । সাইট থেকে সম্পর্কিত (সম্পাদিত) তথ্য:

• এতে চিত্র এবং পাঠ্য যুক্ত করে select options
• বিকল্পগুলি পপুলেশন করতে JSON ব্যবহার করতে পারেন
• নির্বাচনের কলব্যাক ফাংশন সমর্থন করে

এবং এখানে বিভিন্ন মোডের একটি পূর্বরূপ:

Answer 3

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

নিম্নলিখিতটি এফএফ 3.5+ এ মোটামুটি সুন্দর দেখায় (অবশ্যই আপনার রঙ পছন্দ পছন্দ করছে):

select {
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cfcfcf inset;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
    background-color: transparent;
}
option {
    background-color: #fef5e6;
    border-bottom: 1px solid #ebdac0;
    border-right: 1px solid #d6bb86;
    border-left: 1px solid #d6bb86;
}
option:hover {
    cursor: pointer;
}

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

Answer 4

এটি করার জন্য আমরা একটি সহজ এবং শালীন উপায় খুঁজে পেয়েছি। এটি ক্রস-ব্রাউজার, অবননযোগ্য এবং কোনও ফর্ম পোস্ট ভাঙবে না। প্রথমে নির্বাচিত বাক্সের অস্বচ্ছতা 0 তে সেট করুন।

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

এটি তাই আপনি এখনও এটি ক্লিক করতে পারেন

তারপরে নির্বাচিত বাক্সের মতো একই মাত্রা দিয়ে ডিভ করুন। ডিভটি ব্যাকগ্রাউন্ড হিসাবে নির্বাচিত বাক্সের নীচে রাখা উচিত। এটি অর্জনের জন্য {অবস্থান: পরম} এবং জেড-সূচক ব্যবহার করুন।

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

জাভাস্ক্রিপ্ট সহ ডিভের অন্তর্নিহিত এইচটিএমএল আপডেট করুন। জিকুয়েরির সাথে ইজি টাইপস:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

এটাই! নির্বাচন বাক্সের পরিবর্তে কেবল আপনার ডিভ স্টাইল করুন। আমি উপরের কোডটি পরীক্ষা করে দেখিনি যাতে আপনার সম্ভবত এটি টুইট করার প্রয়োজন হবে। তবে আশা করি আপনি সংক্ষেপে পাবেন।

আমি মনে করি এই সমাধানটি ats-ওয়েবেকিট-উপস্থিতি: কোনওটি নয় be মারধর করে} ব্রাউজারগুলি সবচেয়ে বেশি যা করা উচিত তা হ'ল ফর্ম উপাদানগুলির সাথে কথোপকথন হ'ল, তবে স্পষ্টভাবে নয় কীভাবে সাইটের নকশা ভঙ্গ করে পৃষ্ঠাতে তাদের প্রাথমিকভাবে প্রদর্শিত হবে।

Answer 5

আপনি বেশিরভাগটি চাইলে এখানে একটি ছোট প্লাগ

• একটি উপাদান বন্ধ অবস্থা কাস্টমাইজ ক্রেজি যানselect
• তবে উন্মুক্ত অবস্থায় আপনি বাছাইয়ের বিকল্পগুলিতে (স্ক্রোল হুইল, অ্যারো কীগুলি, ট্যাব ফোকাস, optionsএজাক্সে পরিবর্তন , যথাযথ জিনডেক্স ইত্যাদি) আরও ভাল দেশীয় অভিজ্ঞতার পক্ষে থাকেন
• অগোছালো ul, liউত্পন্ন মার্কআপগুলি অপছন্দ করুন

তারপরে jquery.yaselect.js আরও ভাল ফিট হতে পারে । কেবল:

$('select').yaselect();

এবং চূড়ান্ত মার্কআপটি হ'ল:

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

Github.com এ এটি পরীক্ষা করে দেখুন

Comments

এটা অসাধারণ এবং খুব মোবাইল ডিভাইসের উপর কাজ করে :)

— ভেড়া উড়ন্ত

আইওএস-এ কাজ করে। দুঃখিত, আমার অ্যান্ড্রয়েড ইত্যাদি অ্যাক্সেস নেই?

— চুনকেট

এটি কোনও প্রশ্ন ছিল না, এটি প্রশংসা ছিল। এটি আমার অ্যান্ড্রয়েডে দুর্দান্ত কাজ করে ।

— উড়ন্ত ভেড়া

Answer 6

আপনি নিজেই সিএসএস দিয়ে কিছুটা ডিগ্রি স্টাইল করতে পারেন

select {
    background: red;
    border: 2px solid pink;
}

তবে এটি পুরোপুরি ব্রাউজারের উপর নির্ভর করে। কিছু ব্রাউজার হঠকারী।

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

Answer 7

বেশিরভাগ ব্রাউজার সিএসএস ব্যবহার করে নির্বাচিত ট্যাগের কাস্টমাইজিং সমর্থন করে না। তবে আমি এই জাভাস্ক্রিপ্টটি পাই যা নির্বাচিত ট্যাগ স্টাইল করতে ব্যবহৃত হতে পারে। তবে যথারীতি আইই ব্রাউজারগুলির জন্য কোনও সমর্থন নেই।

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ আমি এইটিতে একটি ত্রুটি লক্ষ্য করেছি যে অন্বেষণ বৈশিষ্ট্যটি কাজ করে না

Answer 8

আমি এটি পেয়েছি যা সত্যিই খুব ভাল বলে মনে হচ্ছে।

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Answer 9

JQuery ছাড়া সমাধান থাকলে solution একটি লিঙ্ক যেখানে আপনি কাজের উদাহরণ দেখতে পাচ্ছেন: http://www.letmaier.com/_selectbox/select_general_code.html (আরও CSS এর সাথে স্টাইলযুক্ত)

আমার সমাধানের স্টাইল-বিভাগ:

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

এখন বডি-ট্যাগের অভ্যন্তরে এইচটিএমএল কোড:

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>

Comments

কেবল একটির সাথে লিঙ্ক করার পরিবর্তে দয়া করে একটি উদাহরণ সরবরাহ করুন।

— সমস্ত কর্মী

আপনার অনুরোধ অনুসারে আমি আমার উত্তর পরিবর্তন করেছি।

— ক্রিস্টোফ লেটমায়ার

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

— সমস্ত কর্মী

ঠিক আছে, বুঝতে পেরেছি ... :-) আমি লিঙ্কটি বাঁচিয়ে রাখার জন্য যথাসাধ্য চেষ্টা করব ...

— ক্রিস্টোফ লেটমায়ার

Answer 10

2014 এর জন্য আপডেট হয়েছে: এর জন্য আপনার জিকিউরির দরকার নেই । আপনি স্টাইলসিলেক্ট ব্যবহার করে jQuery ছাড়াই একটি নির্বাচন বাক্সকে পুরোপুরি স্টাইল করতে পারেন । উদাহরণস্বরূপ, নিম্নলিখিত নির্বাচন করা বাক্স দেওয়া:

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

দৌড়ানো styleSelect('select.demo')নীচের মতো একটি স্টাইলযুক্ত নির্বাচন করা বাক্স তৈরি করবে:

Comments

পার্শ্ব নোট, আইই 9 এবং নীচের জন্য কোনও সমর্থন নেই

— বেন সেওয়ার্ডস

Answer 11

আমি কয়েক দিন আগে jQuery প্লাগইন, সিলেক্টবক্সআইটি তৈরি করেছি । এটি নিয়মিত এইচটিএমএল নির্বাচন বাক্সের আচরণ অনুকরণ করার চেষ্টা করে, তবে আপনাকে jQueryUI ব্যবহার করে নির্বাচন করা বাক্সটি স্টাইল এবং অ্যানিমেট করতে দেয়। একবার দেখুন এবং আপনি কি মনে করেন তা আমাকে জানান।

http://www.selectboxit.com

Answer 12

আপনার ikSelect এর মতো কিছু jQuery প্লাগইন ব্যবহার করার চেষ্টা করা উচিত ।

আমি এটিকে খুব কাস্টমাইজেবল তবে ব্যবহারযোগ্য করে তোলার চেষ্টা করেছি।

http://github.com/Igor10k/ikSelect

Answer 13

এটি পুরানো মনে হচ্ছে তবে এখানে একটি খুব আকর্ষণীয় প্লাগইন - http://uniformjs.com

Answer 14

ব্যবহারসমূহ এই twitter-bootstrapশৈলী ঘুরিয়ে selectমধ্যে dropdownমেনু https://github.com/silviomoreto/bootstrap-select

Answer 15

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

JQuery কোড এর সাথে একই রকম দেখাচ্ছে।

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>