কীভাবে একটি ড্রপডাউন তালিকা থেকে ডিফল্ট তীর আইকনটি সরান (উপাদান নির্বাচন করুন)?

Question

আমি এইচটিএমএল <select>উপাদান থেকে ড্রপডাউন তীরটি মুছে ফেলতে চাই । উদাহরণ স্বরূপ:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

কীভাবে এটি অপেরা, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরারে করবেন?

Comments

- ফায়ারফক্স এটা লুকানোর জন্য কিছু উত্তর / হ্যাক stackoverflow.com/questions/5912791/...

— andyb

উপস্থিতি #slectType { -webkit-appearance: none; appearance: none /*menulist*/ ! গুরুত্বপূর্ণ; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;} ব্রাউজগুলি [সিএইচ:-ওয়েবেকিট, এফএফ: -মোজ, আইই:-মিমস, ওপ্রেয়া: -ও];

— যশ

আইই

— মুয়াথ

এইচটিএমএল আড়ালের

— দাম্জন পাভলিকা

Answer 1

হ্যাকস বা ওভারফ্লোয়ের দরকার নেই। আই-তে ড্রপডাউন তীরের জন্য ছদ্ম-উপাদান রয়েছে:

select::-ms-expand {
    display: none;
}

Comments

কারণ প্রশ্ন ছিল কীভাবে আইপি-তে ড্রপডাউন তীরটি সরানো যায়। আইই 9 এর এই কার্যকারিতাটি নেই তবে এটি আইই 10 তে কাজ করে। সুতরাং আপনি উইন্ডোজ এক্সপি ব্যবহার না করা অবধি আপনার আইই 10 ব্যবহার করা উচিত। IE11 প্রায় শেষ। অন্যান্য বিকল্প হ'ল আসল ড্রপডাউন বোতামটি আড়াল করতে এবং নিজের তৈরি করতে একটি কুশ্রী সিএসএস হ্যাক।

— nrutas

ওভারফ্লো লুকানোর জন্য এখানে লিঙ্কটি কুৎসিত হ্যাক

— অ্রুতাস

আইই 11 এ কাজ করে। এবং Gracias!

— কনারলুডি

এটি ফায়ারফক্সে কাজ করেনি। ফায়ারফক্সের জন্য নীচে বরুণ রাঠোরের সমাধানটি ব্যবহার করুন।

— অলমোস্টপিট

এটি কেবল আইইয়ের জন্য। অবশ্যই এটি ফায়ারফক্সে কাজ করবে না।

— nrutas

Answer 2

পূর্বে উল্লিখিত সমাধানগুলি ক্রোম দিয়ে ভাল কাজ করে তবে ফায়ারফক্সে নয়।

আমি একটি সমাধান পেয়েছি যা ক্রোম এবং ফায়ারফক্স (আইই তে নয়) উভয়ই ভাল কাজ করে। আপনার নির্বাচনের জন্য সিএসএসে নিম্নলিখিত বৈশিষ্ট্যগুলি যুক্ত করুন এবং আপনার প্রয়োজন অনুসারে মার্জিন-টপ সামঞ্জস্য করুন।

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

আশাকরি এটা সাহায্য করবে :)

Comments

এই কৌশলটি ফায়ারফক্সে 31 সংস্করণ হিসাবে কাজ বন্ধ করে দিয়েছে (মে 2014 এর মধ্যে রাত্রি বিল্ডে)। এর মধ্যে কী করা যায় তা দেখা যাক। আমি লিখেছি এই গিস্টটির

— কুনহা

জোও কুনার পদ্ধতিটি পরীক্ষা করে সফলভাবে ব্যবহার করা হয়েছে। যখন আপনি এটি পরীক্ষা করে দেখুন, ফায়ারফক্সে লিঙ্কটি খুলতে ভুলবেন না!

— NoobishPro

এটা আমার জন্য কাজ করেছে। আমি এইচটিএমএল থেকে পিডিএফ তৈরি করতে ডাব্লুএইচটিএমলেটপডিএফ ব্যবহার করতে চেয়েছিলাম। ধন্যবাদ

— ফয়সাল

Answer 3

নির্বাচন থেকে ড্রপ ডাউন তীর সরানোর সহজ উপায়

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

Comments

আমি সবেমাত্র appearance: noneক্রোম এবং ফায়ারফক্স কোয়ান্টাম (v59 এবং আরও) জন্য ব্যবহার করেছি। অর্থাৎ আর কোনও বিক্রেতার উপসর্গের দরকার নেই ।

— সিপিএইচপিথন

@ সিপিএইচপিথন এই মন্তব্য হিসাবে বেশিরভাগ ব্রাউজারগুলিতে এখনও তাদের "উপসর্গের সাথে আংশিক সমর্থন" ট্যাগ রয়েছে ...

— ড্যান

@ সিপিএইচপিপিথন আপনার প্রকল্পে অপিফিক্সডappearance: none কাজ করার জন্য অটোপ্রেফিক্সার লাগানো দরকার । বেশিরভাগ ব্রাউজারের এখনও উপসর্গ প্রয়োজন।

— ড্যানিয়েল টোনন

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

— সিপিএইচপিথন

Answer 4

এটা চেষ্টা কর :

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

জেএস বিন: http://jsbin.com/aniyu4/2/edit

আপনি যদি ইন্টারনেট এক্সপ্লোরার ব্যবহার করেন:

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

অথবা আপনি Choosen ব্যবহার করতে পারেন: http://harvesthq.github.io/chosen/

Comments

আপনি কী আপনার জেএসবিন আইই এবং ফায়ারফক্সে পরীক্ষা করেছেন ? আমি এখনও দুটিতে বিল্ট ইন ড্রপডাউন তীরটি দেখতে পাচ্ছি।

— মার্টিন স্মিথ

চুসেনের সাথে চেক করুন, আমি মনে করি এটি সেরা পছন্দ।

— এপোক্ক

"আপনি যদি ইন্টারনেট এক্সপ্লোরার ব্যবহার করেন"? আপনার যে জনসংখ্যার IE ব্যবহার করে এবং নির্বিশেষে তাদের জন্য খাদ্য সরবরাহ করেন তাদের বৃহত% জনগণকে বিবেচনা করতে হবে

— ড্যানি মাহনি

আমাদের সাইটের ব্যবহারকারীর পরিসংখ্যানগুলি নিম্নরূপ: 5.21% আইই বা 2.37% এজ

— নিউ এভারেস্ট

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

— ব্র্যান্ডিটো

Answer 5

এটা চেষ্টা কর:

এইচটিএমএল:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

সিএসএস:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

Answer 6

এটি চেষ্টা করুন এটি আমার জন্য কাজ করে,

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

আপনি আড়াল করতে পারবেন না তবে ওভারফ্লো লুকানো ব্যবহার করে আপনি এটি একেবারে অদৃশ্য করে দিতে পারেন।

Answer 7

শুধু থ্রেডটি সম্পূর্ণ করতে চেয়েছিলেন। খুব স্পষ্ট হওয়ার জন্য এটি আই 9 তে কাজ করে না, তবে আমরা এটি সামান্য সিএসএস কৌশল দ্বারা করতে পারি।

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

Answer 8

আমি যেমন উত্তর সরান তীর সরান উত্তর হিসাবে

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

.simple-control আপনার সিএসএস ক্লাস

:disabled সিউডো ক্লাস

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

Answer 9

select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

Answer 10

আপনি সম্পূর্ণ ক্রিয়ামূলক ক্রস ব্রাউজার সমর্থন দিয়ে এটি করতে পারবেন না।

ধরুন 50 পিক্সেলের ডিভিড নেওয়ার চেষ্টা করুন এবং এর ডানদিকে আপনার পছন্দসই একটি পছন্দসই ড্রপ-ডাউন আইকন ভাসা করুন

এখন এই ডিভের মধ্যে, 55 পিক্সেলের প্রস্থের সাথে নির্বাচিত ট্যাগটি যুক্ত করুন (ধারকটির প্রস্থের চেয়ে বেশি কিছু)

আমি মনে করি আপনি যা চান তা পাবেন।

আপনি যদি ডানদিকে কোনও ড্রপ আইকন না চান তবে ডানদিকে চিত্রটি ভাসমান ব্যতীত সমস্ত পদক্ষেপ করুন। নির্বাচিত ট্যাগের জন্য ফোকাসে রূপরেখা: 0 সেট করুন। এটাই

Comments

আমি এই ইঙ্গিতগুলি থেকে কোনও সহায়তা পেতে পারি না। কেউ কি এখানে পর্যাপ্ত কোড দিতে পারেন? ধন্যবাদ.

— ব্যবহারকারী2301515

Answer 11

ড্রপকিক.জেএস নামে একটি গ্রন্থাগার রয়েছে যা এইচটিএমএল / সিএসএসের সাথে সাধারণ নির্বাচিত ড্রপডাউনগুলি প্রতিস্থাপন করে যাতে আপনি পুরোপুরি স্টাইল করতে পারেন এবং জাভাস্ক্রিপ্টের সাহায্যে এগুলি নিয়ন্ত্রণ করতে পারেন। http://dropkickjs.com/

Answer 12

সমস্ত ব্রাউজার এবং সমস্ত সংস্করণের জন্য কাজ করে:

জাতীয়

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

এইচটিএমএল

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>