ফায়ারফক্সের একটি নির্বাচিত উপাদান থেকে তীরটি কীভাবে সরিয়ে ফেলা যায়

172

আমি selectCSS3 ব্যবহার করে একটি উপাদান স্টাইল করার চেষ্টা করছি । আমি ওয়েবকিট (ক্রোম / সাফারি) এর ফলাফলগুলি পাচ্ছি, তবে ফায়ারফক্স খুব ভাল খেলছে না (আমি এমনকি আইই নিয়েও বিরক্ত করছি না)। আমি সিএসএস 3 appearanceসম্পত্তি ব্যবহার করছি তবে কোনও কারণে আমি ফায়ারফক্সের বাইরে ড্রপ-ডাউন আইকনটি কাঁপতে পারি না।

আমি যা করছি তার একটি উদাহরণ এখানে: http://jsbin.com/aniyu4/2/edit it

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

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

কোন ধারনা? না, জাভাস্ক্রিপ্ট কোনও বিকল্প নয়

html firefox css

— RussellUresti
সূত্র

3

এটি সম্পর্কে এখন একটি বাগ রিপোর্ট রয়েছে: bugzilla.mozilla.org/show_bug.cgi?id=649849

— স্নাইলান

3

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

— স্টেফেনমুরডোচ

আপনি এই ব্লগ পোস্টটি দরকারী খুঁজে পেতে পারেন: red-team-design.com/making-html-roddowns-not-suck

— রুই মার্কস

1

দেখে মনে হচ্ছে তারা -moz-appearanceCSS3 সম্পত্তি যুক্ত করেছে , আমি ব্যবহার করছি -moz-appearance: none;এবং এটি 35.0.1 সংস্করণে কাজ করছে বলে মনে হচ্ছে।

— টনি এম

একটি সাধারণ ফিক্সটি হবে ধারকটির চেয়ে নির্বাচনের উপাদানকে আরও বিস্তৃত করা। এবং একটি মোজিলা ইউআরএল-প্রিফিক্স মোড়ানো যাতে বিকল্পগুলি কেবল ফায়ার ফক্সে আরও বিস্তৃত হয়। @-moz-document url-prefix() { select { width: 105%; overflow: hidden; } }

— লুক ফেমুর

78

ঠিক আছে, আমি জানি এই প্রশ্নটি পুরানো, কিন্তু 2 বছর ধরে ট্র্যাকের নিচে এবং মজিলা কিছুই করেনি।

আমি একটি সহজ workaround সঙ্গে এসেছি।

এটি মূলত ফায়ারফক্সে নির্বাচিত বাক্সের সমস্ত ফর্ম্যাটিংটি সরিয়ে দেয় এবং আপনার পছন্দসই শৈলীর সাহায্যে নির্বাচিত বাক্সের চারদিকে একটি স্প্যান উপাদানকে আবৃত করে, তবে কেবল ফায়ারফক্সে প্রয়োগ করা উচিত।

বলুন এটি আপনার নির্বাচিত মেনু:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

এবং ধরুন যে সিএসএস শ্রেণি 'সিএসএস-নির্বাচন' হ'ল:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

ফায়ারফক্সে, এটি নির্বাচিত মেনুতে প্রদর্শিত হবে, তারপরে কুরুচিযুক্ত ফায়ারফক্স নির্বাচন করুন তীর এবং তারপরে আপনার দুর্দান্ত কাস্টম দেখায়। আদর্শ নয়।

এখন ফায়ারফক্সে যেতে, ক্লাস 'সিএসএস-সিলেক্ট-মোজ' সহ চারদিকে একটি স্প্যান উপাদান যুক্ত করুন:

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

তারপরে মোজিলার নোংরা তীরটি-মোজ-উপস্থিতি সহ লুকানোর জন্য সিএসএস স্থির করুন: উইন্ডোটি এবং স্প্যানের শ্রেণি 'সিএসএস-সিলেক্ট-মোজ' এর মধ্যে কাস্টম তীরটি নিক্ষেপ করুন, তবে কেবল এটি মোজিলায় প্রদর্শিত হবে:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
}

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

আমি এটি কেবল ফায়ারফক্স (ম্যাক) সংস্করণে 18 এবং তারপরে 22 (আমার আপডেট হওয়ার পরে) পরীক্ষা করেছি।

সমস্ত প্রতিক্রিয়া স্বাগত।

— জর্ডান ইয়ং
সূত্র

2

এবং 2 বছর পরে, এটি আমার পছন্দসই ফলাফল অর্জনের জন্য পোস্ট করা হয়েছে এটি সেরা উত্তর। আমি কোডটির একটি জেএসবিন এখানে রেখেছি : অন্যদের দেখার জন্য jsbin.com/aniyu4/2440/Adit এবং শুধুমাত্র 1 টি ছোট সিএসএস আপডেট করেছি। ডান প্যাডিংয়ের কারণে স্প্যানটি এফএফ-র নির্বাচনের চেয়ে আরও বিস্তৃত ছিল - এর অর্থ তীরটি ক্লিক করা ড্রপডাউনটি সক্রিয় করে নি। এর জন্য সামঞ্জস্য করতে, আমি স্প্যানের প্রস্থকে আবার পিছনে টানতে, নির্বাচনের প্রস্থকে ওভারল্যাপ করতে, নির্বাচনের উপাদানটিতে নেতিবাচক ডান মার্জিন রেখেছি।

— রাসেলউরেস্তি

ওহ অবশ্যই! রাসেল অনেক ধন্যবাদ। সত্যিই খুশি যে এই সাহায্য করেছে।

— জর্দান ইয়ং

5

উইন্ডোজ এফএফ 23-24 এ আমার জন্য কাজ করেনি (আমি মন্তব্যে জেসবিন চেষ্টা করেছি)। Tis

— এসটেবান

4

এটি আর এফএফ 30 এ কাজ করে না। দয়া করে এগিয়ে যান এবং মজিলার ওয়েবসাইটে একটি টিকিট জমা দিন: bugzilla.mozilla.org/show_bug.cgi?id=649849 । যত বেশি লোকেরা এটি সম্পর্কে অভিযোগ করেন, তাদের এটি ঠিক করার আমাদের আরও ভাল সুযোগ থাকে।

— স্ট্যান

1

শুধুমাত্র ম্যাকের জন্য এফএফ 31 এ কাজ করে।

— এরউইন ওয়েসেল

165

আপডেট: এটি ফায়ারফক্স v35 এ স্থির করা হয়েছিল। বিস্তারিত জানার জন্য পুরো টুকরোটি দেখুন ।

ফায়ারফক্স থেকে নির্বাচিত তীরটি কীভাবে সরিয়ে ফেলতে হবে তা সবেমাত্র আবিষ্কার করলেন । কৌতুক একটি মিশ্রণ ব্যবহার করা -prefix-appearance, text-indentএবং text-overflow। এটি খাঁটি সিএসএস এবং কোনও অতিরিক্ত মার্কআপের প্রয়োজন নেই।

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

উইন্ডোজ 8, উবুন্টু এবং ম্যাক, ফায়ারফক্সের সর্বশেষ সংস্করণে পরীক্ষিত।

সরাসরি উদাহরণ: http://jsfiddle.net/joaocunha/RUEbp/1/

বিষয়ে আরও: https://gist.github.com/joaocunha/6273016

— জোও কুনহা
সূত্র

1

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

— রাসেল উরেস্তি

দুর্দান্ত ক্যাচ, @ রাসেল ইউরেস্তি। তবে পুরো ধারণাটি বিবেচনা করে কোনও পরিবর্তিত তীর সরবরাহ করা হতে পারে, স্থানটি আসলে নিজেকে কার্যকর প্রমাণ করে। আমি এটা দিয়ে একটু বাজালাম, যোগ padding-right:10px;করতে <select>হবে "পুশ" বাম এখন অদৃশ্য তীর। বটমলাইন: ফায়ারফক্স তীরটি আড়াল করে, ক্রোম এটিকে সরিয়ে দেয়। সেই অনুযায়ী আমার লেখাগুলি আপডেট করবে, তার জন্য ধন্যবাদ।

— জোও কুনহা

আমি উত্তর হিসাবে কিছুটা ক্রসব্রোজার যুক্ত করেছি (IE এর পুরানো সংস্করণে পরীক্ষা করে দেখিনি) যাতে আপনি নিজের আপডেট করতে পারেন

— ড্যানিয়েল টিউল্প

2

আমার জন্য সর্বোত্তম সমাধান, যেমন -moz-appearence: windowস্বচ্ছ ব্যাকগ্রাউন্ডের সাথে কাজ করে না (কমপক্ষে ফায়ারফক্স লিনাক্সে একটি কুরুচিপূর্ণ বিজি আঁকুন)

— কিক

যেহেতু এটি তীর পুরোপুরি সরিয়ে ফেলেছে, ফলস্বরূপ <নির্বাচন> একটি পাঠ্যবাক্সের মতো দেখায় এবং এটি কুরুচিপূর্ণ। সুতরাং আপনি এটিকে একটি ড্রপডাউনর মতো দেখতে পটভূমির চিত্রটি আবার যুক্ত করতে পারেন: codepen.io/anon/pen/nvfCq

— thom_nic

59

আমার জন্য যে কৌশলটি কাজ করে তা হ'ল 100% এর বেশি প্রস্থ নির্বাচন করা এবং ওভারফ্লো প্রয়োগ করা হয়: লুকানো

select {
    overflow:hidden;
    width: 120%;
}

এফএফ-এ ড্রপডাউন তীরটি গোপন করার এখনই একমাত্র উপায়।

BTW। আপনি যদি সুন্দর ড্রপডাউন চান http://harvesthq.github.com/chosen/

— opengrid
সূত্র

6

এটি আমার জন্য কোনও প্রভাব ফেলবে না। এফএফ 6.0.2

— চার্লি শ্লিয়েসার

1

IE এর জন্যও ভাল সমাধান আমার দ্রবণে আমি অন্তর্ভুক্ত ডিভ উপাদানটিকে ওভারফ্লোতে সেট করেছি: লুকানো এবং তারপরে নির্বাচনের প্রস্থকে আরও বৃহত্তর করে তুলেছি। দুর্দান্ত কাজ করে।

— মাইকে

@ চার্লি এস: ওভারফ্লোটি রাখার চেষ্টা করুন: ডিভযুক্ত ডিভিডে লুকিয়ে রয়েছে। এটি আমার জন্য

— তাহাত

1

আপনি যখন ড্রপডাউনটি প্রসারিত করবেন তখন উপচে পড়া: লুকানো কাজ করে না

— মার্চ

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

— জিম্বালি

26

গুরুত্বপূর্ণ আপডেট:

ফায়ারফক্স ভি 35 হিসাবে উপস্থিতির বৈশিষ্ট্য এখন কাজ করে !!

থেকে V35 ফায়ারফক্স এর অফিসিয়াল রিলিজ নোট :

ব্যবহার -moz-appearanceসঙ্গে noneএকটি কম্বো উপর মান এখন ড্রপডাউন বোতাম (বাগ 649849) মুছে ফেলুন।

সুতরাং এখন ডিফল্ট তীরটি লুকানোর জন্য - এটি আমাদের নির্বাচিত উপাদানটিতে নিম্নলিখিত বিধিগুলি যুক্ত করার মতোই সহজ:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

ডেমো

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

স্নিপেট প্রসারিত করুন

— Danield
সূত্র

20

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

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

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

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

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

.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());
}

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

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

— শন
সূত্র

6

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

— রাসেলউরেস্তি

14

এইভাবে চেষ্টা করুন:

-webkit-appearance: button;
-moz-appearance: button;

তারপরে, আপনি ব্যাকগ্রাউন্ড হিসাবে আলাদা চিত্র ব্যবহার করতে পারেন এবং এটি স্থাপন করতে পারেন:

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

মোজ ব্রাউজারগুলির জন্য আরও একটি উপায় রয়েছে:

text-indent:10px;

আপনার যদি নির্বাচিত প্রস্থের সংজ্ঞা দেওয়া থাকে তবে এই সম্পত্তিটি নির্বাচিত অঞ্চলের অধীনে ডিফল্ট ড্রপবক্স বোতামটি চাপবে।

এটা আমার জন্য কাজ করে! ;)

— ninja_corp
সূত্র

6

সম্পূর্ণ সমাধান না হয়েও আমি খুঁজে পেয়েছি যে…

-moz-appearance: window;

… কিছুটা হলেও কাজ করে। আপনি ব্যাকগ্রাউন্ড (-রঙ বা-চিত্র) পরিবর্তন করতে পারবেন না তবে উপাদানটি রঙের সাথে অদৃশ্য হয়ে যাবে: স্বচ্ছ। নিখুঁত নয় তবে এটি একটি শুরু এবং আপনার সিস্টেমের স্তর উপাদানটিকে একটি জেএস দিয়ে প্রতিস্থাপন করতে হবে না।

— স্টুয়ার্ট ব্যাডমিন্টন
সূত্র

হ্যাঁ, আমি লক্ষ্য করেছি যে windowএর প্রভাব ছিল, দুর্ভাগ্যক্রমে, আমার পটভূমি চিত্রটি সেট করা দরকার। দুর্ভাগ্যজনক যে ফায়ারফক্সে এটি খুব ভাল নয়।

— রাসেলউরেস্তি

দুর্ভাগ্যজনক যে হ্যাঁ উপাদানগুলি তৈরি করতে আপনি পুরো রিসেট প্রয়োগ করতে পারবেন না। << নির্বাচন> এর নীচে এমন একটি উপাদান রেখে আপনি সর্বদা পটভূমি নকল করতে পারেন, যা অবশ্যই আদর্শ নয়।

— স্টুয়ার্ট ব্যাডমিন্টন

1

এটি মুদ্রণের জন্য পারফেক্ট ! স্রেফ একটি media="print"সিএসএস ব্লক সেট করুন select {-moz-appearance: window;}এবং এফএফ-তে সমস্ত নির্বাচনের তীর এবং পটভূমি সরিয়ে ফেলবেন (অন্যান্য ব্রাউজারগুলির জন্য চেহারা বা -উবকিট-উপস্থিতি চেষ্টা করুন) যাতে তারা সরল পাঠ্য বা শিরোনামের মতো দেখায়

— ফ্রান্সেসকো

4

আমি মনে করি সমাধানটি আমি এফএফ 31 এর সাথে সামঞ্জস্যপূর্ণ পেয়েছি !!!
এই লিঙ্কটিতে এখানে দুটি অপশন ভালভাবে ব্যাখ্যা করা হয়েছে:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

আমি বিকল্প 1 ব্যবহার করেছি: রডরিগো-লুডগ্রো একটি অনলাইন সহ গিথুবে এই ফিক্স পোস্ট করেছেন ডেমো। আমি ফায়ারফক্স ৩১.০ এ এই ডেমোটি পরীক্ষা করেছি এবং এটি সঠিকভাবে কাজ করছে বলে মনে হচ্ছে। পাশাপাশি Chrome এবং IE তেও পরীক্ষিত ested এইচটিএমএল কোডটি এখানে:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

এবং সিএসএস:

.custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; 
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

http://jsbin.com/pozomu/4/edit

এটি আমার পক্ষে খুব ভাল কাজ করে!

— ferocesalatino
সূত্র

2

বাহ্যিক সংস্থানগুলিতে লিঙ্কগুলি উত্সাহিত করা হয় তবে দয়া করে লিঙ্কটির চারপাশে প্রসঙ্গটি যুক্ত করুন যাতে আপনার সহ ব্যবহারকারীদের এটি কী এবং কেন আছে তা কিছুটা ধারণা থাকতে পারে। টার্গেট সাইটটি যদি অ্যাক্সেসযোগ্য না হয় বা স্থায়ীভাবে অফলাইনে চলে যায় তবে সর্বদা গুরুত্বপূর্ণ লিঙ্কের সর্বাধিক প্রাসঙ্গিক অংশটি উদ্ধৃত করুন।

— অ্যান্ড্রু স্টুবস

পরামর্শের জন্য আপনাকে ধন্যবাদ! আমার দোষের জন্য দুঃখিত!

— ফিরোসালাতিনো

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

— অ্যান্ড্রু স্টুবস

2

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

ব্রাউজার এবং অপারেটিং সিস্টেমে ধারাবাহিকভাবে এটি করার একমাত্র উপায়, জাভাস্ক্রিপ্ট ব্যবহার করা এবং selectউপাদানগুলিকে "ডিএইচটিএমএল" এর সাথে প্রতিস্থাপন করা।

নিম্নলিখিত নিবন্ধে তিনটি jQuery ভিত্তিক প্লাগইন দেখায় যা আপনাকে এটি করতে দেয় (এটি কিছুটা পুরানো তবে এখনই আমি বর্তমানের কিছু খুঁজে পাইনি)

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

— RoToRa
সূত্র

8

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

— রাসেলওরেস্তি

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

— ফ্রান্সেসকোএমএম

2

/* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}

— টড ব্রস
সূত্র

ছদ্ম উপাদান ব্যবহার করার পরামর্শ দেওয়ার জন্য +20

— জ্যাচ সাউসিয়ার

2

আমি এই পছন্দ পছন্দ নির্বাচন স্টাইলিং করছি

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

এটি আমার পরীক্ষার সমস্ত সংস্করণে এফএফ, সাফারি এবং ক্রোমে আমার জন্য কাজ করে।

আইই তে আমি রেখেছি:

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

এছাড়াও আপনি এটি করতে পারেন: .yourclass :: - এমএস-প্রসারণ {প্রদর্শন: কিছুই নয়; y .ওরিড :: - এমএস-এক্সপ্যান {প্রদর্শন: কিছুই নয়; }

— অ্যালেক্স মালেইরো
সূত্র

1

আমি জানি এই প্রশ্নটি কিছুটা পুরানো, তবে যেহেতু এটি গুগলে সক্রিয় হয় এবং এটি একটি "নতুন" সমাধান:

appearance: normalআমার জন্য ফায়ারফক্সে সূক্ষ্ম কাজ করার জন্য মনে হচ্ছে (এখন সংস্করণ 5)। তবে অপেরা এবং আইই 8/9 এ নয়

অপেরা এবং :beforeআইই 9 এর কার্যকারিতা হিসাবে , আমি সিউডোজেক্টর ব্যবহার করে একটি নতুন সাদা বাক্স তৈরি করেছি এবং এটিকে তীরের উপরে রেখেছি ।

দুর্ভাগ্যক্রমে, IE8 এ এটি কাজ করে না । বাক্সটি সঠিকভাবে রেন্ডার করা হয়েছে, তবে তীরটি যেভাবেই বাইরে চলে যায় ...: - /

select:beforeঅপেরাতে সূক্ষ্ম কাজ করে তবে আইই তে নয়। যদি আমি বিকাশকারী সরঞ্জামগুলির দিকে নজর রাখি তবে আমি দেখতে পাচ্ছি যে এটি নিয়মগুলি সঠিকভাবে পড়ছে, এবং তারপরে কেবল সেগুলি উপেক্ষা করে (তারা পার হয়ে গেছে)। সুতরাং আমি <span class="selectwrap">প্রায় একটি বাস্তব ব্যবহার <select>।

select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

আপনার এটিকে কিছুটা টুইট করার দরকার হতে পারে তবে এটি আমার পক্ষে কাজ করে!

দাবি অস্বীকার: আমি ফর্মগুলির সাথে ওয়েবপৃষ্ঠার একটি ভাল দেখাচ্ছে হার্ডকপি পেতে এটি ব্যবহার করছি যাতে আমার দ্বিতীয় পৃষ্ঠা তৈরি করার দরকার নেই। আমি কোনও 1337 হাইএক্সএক্স 0 আর নয় যিনি লাল স্ক্রোলবারগুলি, <marquee>ট্যাগগুলি এবং কী করতে চান :-) আপনার খুব ভাল কারণ না থাকলে দয়া করে ফর্মগুলিতে অতিরিক্ত স্টাইলিং প্রয়োগ করবেন না ।

— মার্টিন টর্নোইজ
সূত্র

3

-moz-appearance: normalএফএক্স 9-তে কোনও বৈধ বিকল্প বলে মনে হচ্ছে না এবং -moz-appearance: none(যা বৈধ) নীচের তীরটি সরিয়ে দেয় না।

— রবিন উইনস্লো

আপনার ওভারল্যাপিং স্প্যান দ্রবণ আইই এবং এফএফ এ কাজ করে তবে ক্রোমে কাজ করে না।

— ভলকান রেভেন

: পূর্বে এবং: ছদ্ম-উপাদানগুলির পরে কেবলমাত্র সেই উপাদানগুলিতে কাজ করে যা অভ্যন্তরীণ সামগ্রী গ্রহণ করে। এটি নির্বাচনের ক্ষেত্রে নয়, না ইনপুটটি, না ফাইলআপলোডার ইত্যাদির জন্য They তারা ডিভ, লিঙ্ক, অনুচ্ছেদ ইত্যাদি for বিষয়বস্তু। এবং একটি নির্বাচিত উপাদান যেমন কিছু সমর্থন করে না <select> hi।

— জোও কুনহা

1

pointer-eventsসম্পত্তি ব্যবহার করুন ।

এখানে ধারণাটি হ'ল নেটিভ ড্রপ ডাউন তীর (আমাদের কাস্টমটি তৈরি করতে) এর উপরে কোনও উপাদানকে ওভারলে করা এবং তারপরে পয়েন্টার ইভেন্টগুলিকে বারণ করা। [ এই পোস্টটি দেখুন ]

এই পদ্ধতিটি ব্যবহার করে এখানে একটি কার্যক্ষম ফিডল রয়েছে ।

এছাড়াও, এই এসও উত্তরে আমি আরও এবং আরও একটি পদ্ধতিতে আরও বিস্তারিত আলোচনা করেছি।

— Danield
সূত্র

1

এটি কাজ করে (ফায়ারফক্স ২৩.০.১ এ পরীক্ষিত):

select {
    -moz-appearance: radio-container;
}

— Ixx
সূত্র

আমার জন্য কাজ করেছেন, তবে আমি radio-containerএকটি নির্বাচিত বস্তুর জন্য মান পছন্দ করি না । উপযুক্ত মান পাওয়ার জন্য মোজ-উপস্থিতি মোজিলা রেফারেন্স ব্রাউজ করুন (আমি ব্যবহৃত menulist-textযা এফএফ 31 এর নির্বাচিত তীরটি লুকিয়ে রাখে)

— স্লাগসার্ড

1

@ জোওকুনহা দ্বারা উত্তরটি তৈরি করা, একটি সিএসএস শৈলী যা আরও একটি ব্রাউজারের জন্য দরকারী use

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

— ড্যানিয়েল তুল্প
সূত্র

1

জোওও কুনহার জবাব ছাড়াও , এই সমস্যাটি এখন মজিলার টোডো তালিকায় রয়েছে এবং 35 নম্বরের জন্য লক্ষ্যযুক্ত।

যারা চান তাদের জন্য কুনার ব্লগে উল্লেখ করা টড পার্কার এখানে একটি কাজ করেছেন, যা আজ কাজ করে:

http://jsfiddle.net/xvushd7x/

এইচটিএমএল:

<label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

সিএসএস:

/* Label styles: style as needed */
label {
  display:block;
  margin-top:2em;
  font-size: 0.9em;
  color:#777;
}

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font-size:16px;
  /* General select styles: change as needed */
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  background-image: url(http://filamentgroup.com/files/select-arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.custom-select:hover {
  border:1px solid #888;
}

/* Focus style */
.custom-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}

/* Set options to normal weight */
.custom-select option {
  font-weight:normal;
}

— crashwap
সূত্র

1

ফায়ারফক্স 35, যেহেতু -moz-appearance:noneআপনি আপনার কোডটিতে ইতিমধ্যে লিখেছেন, অবশেষে পছন্দসই অনুসারে তীর বোতামটি সরিয়ে ফেলুন।

সংস্করণ থেকে এটি একটি বাগ সমাধান করা হয়েছিল ।

— লুকা ডিটোমি
সূত্র

1

এখানে এবং সেখানে প্রচুর আলোচনা হচ্ছে তবে আমি এই সমস্যার সঠিক কোনও সমাধান দেখতে পাচ্ছি না। আইই এবং ফায়ারফক্সে এই হ্যাকটি করার জন্য একটি ছোট জ্যাকুরি + সিএসএস কোড লিখে শেষ পর্যন্ত শেষ হয়েছে।

Jquery ব্যবহার করে এলিমেন্ট প্রস্থ (নির্বাচন করুন এলিমেন্ট) গণনা করুন। উপাদানটির চারপাশে একটি মোড়ক যুক্ত করুন এবং এই উপাদানটির জন্য ওভারফ্লো লুকিয়ে রাখুন। নিশ্চিত করুন যে এই মোড়কের প্রস্থটি অ্যাপোক্স is নির্বাচন উপাদান হিসাবে 25px কম। এটি খুব সহজেই জ্যাকুয়ের সাথে করা যেতে পারে। তো এখন আমাদের আইকন চলে গেছে ..! এবং এটি নির্বাচন উপাদানগুলিতে আমাদের চিত্র আইকন যুক্ত করার সময় ... !!! ব্যাকগ্রাউন্ড যুক্ত করার জন্য কয়েকটি সাধারণ লাইন যুক্ত করুন এবং আপনি সমস্ত হয়ে গেছেন .. !! বাইরের র‌্যাপারের জন্য লুকানো ওভারফ্লো ব্যবহার নিশ্চিত করুন,

এখানে কোডের একটি নমুনা দেওয়া হয়েছে যা দ্রুপালের জন্য করা হয়েছিল। তবে কোডের কয়েকটি লাইন যা ড্রুপাল স্পেসিফিক তা মুছে ফেলে অন্যদের জন্যও ব্যবহার করা যেতে পারে।

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);

/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

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

এখানে আরও বর্ণিত: - http://northwebstudio.com/blogs/1/jquery/remove-DP-down-arrow-html-select-element-used-jquery-and-css

— user3058338
সূত্র

1

এই সিএসএস চেষ্টা করুন

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

ইহা কাজ করছে

— সুবিন্দাস রাত
সূত্র

0

appearanceCSS3 থেকে থাকা সম্পত্তিটি noneমানটিকে অনুমতি দেয় না । কটাক্ষপাত W3C এর রেফারেন্স । সুতরাং, আপনি যা করার চেষ্টা করছেন তা বৈধ নয় (প্রকৃতপক্ষে ক্রোমও গ্রহণ করা উচিত নয়)।

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

আমি আপনাকে সিলেক্টবক্স jQuery প্লাগইন ব্যবহার বিবেচনা করার পরামর্শ দিচ্ছি । এটি খুব হালকা ও সুন্দরভাবে সম্পন্ন হয়েছে।

— এরিক পেট্রুসেলি i
সূত্র

1

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

— রাসেলওরেস্তি

1

@ রাসেল ইউরেস্তি, অতএব যদিও বিক্রেতা উপসর্গ থেকে বর্ণিত বিবরণ -mozগ্রহণ করে none(যদিও এটি কাজ করে) এটি ব্যবহার করা সঠিক হবে না। ফায়ারফক্সের মতো ব্রাউজার সম্পর্কিত আরও কিছু, যা সর্বদা মানদণ্ড অনুসরণ করে নিজেকে গর্বিত করে।

— এরিক পেট্রুসেলি

0

আপনি বাক্সটির প্রস্থ বৃদ্ধি করতে এবং তীরটির বাম দিকে ঘুরতে পারেন। এটি আপনাকে খালি সাদা ডিভ দিয়ে তীরটি coverাকতে দেয়।

একবার দেখুন: http://jsbin.com/aniyu4/86/edit

— user909410
সূত্র

0

আপনি কি এইচটিএমএল-এ সামান্য পরিবর্তন গ্রহণ করবেন?

সিলেক্ট ট্যাগযুক্ত ডিভি ট্যাগ লাগানোর মতো কিছু।

দেখা যাক.

— Galled
সূত্র

0

বা, আপনি নির্বাচন ক্লিপ করতে পারেন। এর লাইন ধরে কিছু:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

এটি নির্বাচন করা বাক্সের ডান পাশের 30px ক্লিপ করা উচিত, তীরটি দূরে সরিয়ে নেওয়া উচিত। এখন একটি 170px ব্যাকগ্রাউন্ড চিত্র সরবরাহ করুন এবং স্টাইলযুক্ত নির্বাচন করুন o

— দুসান স্মোলনিকার
সূত্র

0

এটি একটি বিশাল হ্যাক, তবে -moz-appearance: menulist-textকৌশলটি করতে পারে।

— বেনামা
সূত্র

এটি আমার জন্য নির্বাচিত তীরটি সরিয়ে ফেলবে বলে মনে হয়েছিল, তবে @ ডেন্ডিনি উল্লেখ করেছেন যে এটি উপাদানটিতে থাকা সমস্ত অন্যান্য স্টাইলিংও সরিয়ে দিয়েছে

— কোডস্টার

0

আমি একই সমস্যা ছিল। এফএফ এবং ক্রোমে এটিকে কাজ করা সহজ, তবে আইই (8+ যা আমাদের সমর্থন করা দরকার) জিনিস জটিল হয়ে যায়। IE8 সহ, "আমি যেখানে চেষ্টা করেছি সর্বত্র" কাজ করে এমন কাস্টম নির্বাচনের উপাদানগুলির সন্ধান করার সবচেয়ে সহজ সমাধানটি আমি কাস্টমসলেক্ট () ব্যবহার করছি

— rafaelbiten
সূত্র

0

আমার জন্য একটি দরকারী হ্যাক হল (নির্বাচন করা) ডিসপ্লেটি সেট করা inline-flex। আমার নির্বাচিত বোতামের ঠিক বাইরে তীরটি কেটে দেয়। যুক্ত কোড সব ছাড়া।

শুধুমাত্র এফএক্সের জন্য। -webkit appearanceক্রোম ইত্যাদির জন্য এখনও প্রয়োজনীয় ...

— অ্যান্ড্রু আইস
সূত্র

2

কোনও প্রভাব আছে বলে মনে হচ্ছে না

— ক্রিস নিকোলা

0

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

<select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

সিএসএস:

select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}

— squarecandy
সূত্র

0

হ্যাকিটি হ্যাক ... এমন একটি সমাধান যা আমি পরীক্ষিত প্রতিটি ব্রাউজারে কাজ করে (সাফারি, ফায়ারফক্স, ক্রোম)। কোনও আইই আশেপাশে পড়ে নেই, তাই আপনি পরীক্ষা করে মন্তব্য করতে পারলে ভালো লাগবে:

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

ইউএসএল-এনকোডড চিত্র সহ সিএসএস:

.wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

http://codepen.io/anon/pen/myPEBy

কুৎসিত তীরটি coverাকতে আমি: পরের উপাদানটি ব্যবহার করছি। যেহেতু নির্বাচনগুলি সমর্থন করে না: পরে, আমার সাথে কাজ করার জন্য একটি মোড়কের দরকার। এখন, আপনি যদি তীরটিতে ক্লিক করেন তবে ড্রপডাউনটি এটি নিবন্ধভুক্ত করবে না যতক্ষণ না আপনার ব্রাউজারটি সমর্থন করে pointer-events: none, যা IE10 ব্যতীত সবাই করে: http://caniuse.com/#feat=pointer-events

সুতরাং আমার জন্য এটি নিখুঁত - একটি দুর্দান্ত, পরিষ্কার, কম মাথা ব্যথার সমাধান, অন্তত জাভাস্ক্রিপ্ট অন্তর্ভুক্ত অন্যান্য সমস্ত বিকল্পের তুলনায়।

TL; ড:

যদি আই 10 (বা নিম্ন) ব্যবহারকারীগণ তীরটি ক্লিক করেন তবে এটি কাজ করবে না। আমার জন্য যথেষ্ট ভাল কাজ করে ...

— সেবাস্তিয়ান শ্মিড
সূত্র

0

আপনি যদি জেএসের সাথে ফিডিং করতে আপত্তি করেন না, আমি একটি ছোট jQuery প্লাগইন লিখেছি যা আপনাকে এটি করতে সহায়তা করে। এটির সাথে আপনাকে বিক্রেতার উপসর্গগুলি সম্পর্কে চিন্তা করার দরকার নেই।

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

ফিডল এখানে: জেএস ফিডল

শর্তটি হ'ল আপনাকে স্ক্র্যাচ থেকে নির্বাচনের স্টাইল করতে হবে (এর অর্থ ব্যাকগ্রাউন্ড এবং সীমানা নির্ধারণ), তবে আপনি সম্ভবত যাইহোক এটি করতে চান।

এছাড়াও যেহেতু ফাংশনটি ডিভের সাথে মূল নির্বাচনকে প্রতিস্থাপন করে, তাই আপনি আপনার সিএসএসে নির্বাচিত নির্বাচকের উপর সরাসরি কোনও স্টাইলিং হারাবেন। সুতরাং নির্বাচিত উপাদানকে একটি শ্রেণি দিন এবং শ্রেণিটি স্টাইল করুন।

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

— Hydde87
সূত্র

-2

অন্যান্য উত্তরগুলি আমার পক্ষে কাজ করে নি বলে মনে হয়েছে তবে আমি এই হ্যাকটি পেয়েছি। এটি আমার পক্ষে কাজ করেছে (জুলাই ২০১৪)

select {
-moz-appearance: textfield !important;
    }

আমার ক্ষেত্রে, আমার কাছে একটি ওয়ার্ক কমার্স ইনপুট ফিল্ডও ছিল তাই আমি এটি ব্যবহার করেছি

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

ইনপুট পরিবর্তে নির্বাচন প্রদর্শন করতে আমার উত্তর আপডেট করেছে

— সূর্যদেব
সূত্র

ইনপুট.ইনপুট-টেক্সট? এটি নির্বাচন বিকল্প এবং প্রশ্ন জিজ্ঞাসা সঙ্গে কি আছে?

— ডেনডিনি