<সিলেক্ট> এবং: ওয়েবকিটে সিএসএসের পরে সমস্যা

Question

আমি সিউডো সহ একটি নির্বাচিত বাক্সে কিছু স্টাইল যুক্ত করতে চাই: পরে (আমার নির্বাচিত বাক্সটি 2 অংশ এবং চিত্র ছাড়াই স্টাইল করতে)। এইচটিএমএল এখানে:

<select name="">
  <option value="">Test</option>
</select>

এবং এটি কাজ করে না। আমি জানি না কেন এবং আমি ডাব্লু 3 সি চশমাগুলিতে উত্তরটি খুঁজে পাইনি। সিএসএস এখানে:

select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select:after {
  content: " ";
  display: inline-block;
  width: 24px; height: 24px;
  background: blue;
}

তাহলে এটি কি স্বাভাবিক বা কোনও কৌশল আছে?

Comments

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

— ইউজার স্টাইলশিটের সিএসএসে

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

— জোনাথন ক্রস

সিউডো উপাদানগুলির

— টেসা

Answer 1

আমি এটি ব্যাপকভাবে পরীক্ষা করে দেখিনি, তবে আমি selectব্রাউজারের পরিবর্তে ব্রাউজারের পরিবর্তে ওএস দ্বারা যে উপাদানগুলির দ্বারা উত্পাদিত হয় যার দ্বারা ব্রাউজারটি চালিত হয় সেই কারণে এটি এখনও সম্ভব (এখনও?) সম্ভব নয় বলে মনে করছি under

Comments

এটি এখন 2019 এবং এখনও এটি একই

— প্লাসিডো

এটি এখন ২০২০ এবং এটি এখনও একইরকম

— জোয়েরি মিনিকেকার

আমি যদি এক ঘন্টা আগে এই 10 বছরের পুরানো পোস্টটিতে আপনার মন্তব্যটি দেখে থাকি তবে আমি আমার সময়ের এক ঘন্টা নিজেকে বাঁচাতে পারতাম। : সি

— এরিকেক 111

Answer 2

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

.select-wrapper {
    position: relative;
}

.select-wrapper:before {
    content: '\f0d7';
    font-family: FontAwesome;
    color: #fff;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 15px;
    pointer-events: none;
}

এবং এটি আমার নির্বাচন

select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

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

আমি আমার নতুন তীরের জন্য ফন্টআউইজ ডট কম ব্যবহার করেছি তবে আপনি যা চান তা ব্যবহার করতে পারেন। অবশ্যই এটি একটি নিখুঁত সমাধান নয়, তবে আপনার প্রয়োজনের উপর নির্ভর করে এটি যথেষ্ট হতে পারে be

Comments

এটি দৃশ্যত নিখুঁত। তবে আপনি সেই আইকনটির মাধ্যমে ক্লিক করতে পারবেন না এবং উপাদানটি খুলবেন না: / কোনও পরামর্শ?

— শোভি

পয়েন্টার-ইভেন্টস: কিছুই নয়; যে যত্ন নেওয়া উচিত। উপরে আমার কোডটি নিয়ে একটি সমস্যা ছিল। আমি কোনও বিভ্রান্তি দূর করতে উপরের কোনও স্যাসকে সিএসএসে পরিবর্তন করব।

— sroy

কোন সিউডো সিলেক্টর (বনাম পরে) এর আগে ব্যবহৃত হয় তা কী বোঝায়?

— এডিগ্রোভস

আপনি একটি বা অন্যটি ব্যবহার করতে পারেন

— sroy

এটি একটি দুর্দান্ত সমাধান তবে এটি বাস্তবায়ন করার সময় আমি খুঁজে পেয়েছি যে কোনও কারণে: কাজ করার আগে এবং না: পরে। কেন জানি না।

— লি প্রোবার্ট

Answer 3

আমার অভিজ্ঞতা অনুসারে এটি কার্যকরভাবে কাজ করে না, যদি না আপনি নিজের <select>কোনও মোড়কে মুড়ে রাখতে ইচ্ছুক হন । তবে পরিবর্তে আপনি যা করতে পারেন তা হ'ল ব্যাকগ্রাউন্ড ইমেজ এসভিজি ব্যবহার করা। যেমন

    .archive .options select.opt {
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-right: 1.25EM;
    appearance: none;
    position: relative;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.5EM 1EM;
    background-position: right center;
    background-clip: border-box;
    -moz-background-clip: border-box;
    -webkit-background-clip: border-box;
}

    .archive .options select.opt::-ms-expand {
        display: none;
    }

আই আই এর কারণে যথাযথ ইউআরএল-এনকোডিংয়ের বিষয়ে সতর্ক থাকুন। আপনাকে অবশ্যই charset=utf8(কেবল নয় utf8) ব্যবহার করতে হবে , এসভিজি বৈশিষ্ট্যের মানগুলি সীমিত করতে ডাবল-কোট (") ব্যবহার করবেন না, আপনার জীবনকে সহজ করার পরিবর্তে অ্যাস্টোস্ট্রোফ (') ব্যবহার করুন। ইউআরএল-এনকোড গুলি (% 3E) In আপনার কোনও ইউএসএফ -8 উপস্থাপনা (যেমন বাবেল্যাপ আপনাকে সেই ক্ষেত্রে সহায়তা করতে পারে) পেতে হবে এমন কোনও নন-এসসিআইআই অক্ষর এবং তারপরে ইউআরএল-এনকোডড ফর্মটিতে সেই উপস্থাপনাটি সরবরাহ করুন - যেমন ▾ ( U+25BEব্ল্যাক ডাউন-পয়েন্টিং ছোট ট্র্যাঙ্গেল) ইউটিএফ -8 উপস্থাপনাটি \xE2\x96\xBEযা %E2%96%BEইউআরএল-এনকোড করা হয়।

Comments

এটি একটি দুর্দান্ত এবং মার্জিত সমাধান

— জোসফ্যাব্রে

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

— কাইলফারিস

Answer 4

এই পোস্টটি সাহায্য করতে পারে http://bavotasan.com/2011/style-select-box- using-only-css/

এই সমস্যাটি সমাধান করার জন্য তিনি একটি শ্রেণীর সাথে একটি বাইরের ডিভ ব্যবহার করছেন।

<div class="styled-select">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
  </select>
</div>

Answer 5

একই সমস্যার মুখোমুখি। সম্ভবত এটি একটি সমাধান হতে পারে:

<select id="select-1">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
<label for="select-1"></label>

#select-1 {
    ...
}

#select-1 + label:after {
    ...
}

Comments

আপনি কি নির্বাচিত উপাদানগুলির উপরে লেবেলটি বসাতে প্রয়োজনীয় স্টাইলগুলিতে যুক্ত করতে পারেন?

— বাফ্রোমকা

Answer 6

এই সমাধানটি শ্রোইয়ের মতো একই, তবে ওয়েব ফন্টের পরিবর্তে CSS ত্রিভুজ সহ:

.select-wrapper {
  position: relative;
  width: 200px;
}
.select-wrapper:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
  position: absolute;
  right: 8px;
  top: 8px;
  pointer-events: none;
}
select {
  background: #eee;
  border: 0 !important;
  border-radius: 0;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  text-indent: 0.01px;
  text-overflow: "";
  font-size: inherit;
  line-height: inherit;
  width: 100%;
}
select::-ms-expand {
  display: none;
}

<div class="select-wrapper">
  <select>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
  </select>
</div>

Answer 7

মার্কআপ পরিবর্তন করা যদি কোনও বিকল্প না হয় তবে কী হবে?

এখানে এমন একটি সমাধান রয়েছে যার একটি মোড়কের কোনও প্রয়োজন নেই: এটি ব্যাকগ্রাউন্ড-ইমেজে একটি এসভিজি ব্যবহার করে। কীভাবে পূরণের রঙটি পরিবর্তন করতে হয় তা বুঝতে আপনাকে একটি HTML সত্তা ডিকোডার ব্যবহার করতে হবে ।

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;

সিএসএস-ট্রিকস থেকে পিন করা হয়েছে ।

Comments

এটি একটি দুর্দান্ত কৌশল। দুর্দান্ত বিরক্তিকর যে আমরা এখনও ২০২০

— তে

Answer 8

এটি হ'ল একটি আধুনিক সমাধান যা আমি ফন্ট-দুর্দান্ত ব্যবহার করে রান্না করেছি । ব্রেভিটির জন্য বিক্রেতার এক্সটেনশনগুলি বাদ দেওয়া হয়েছে।

এইচটিএমএল

<fieldset>
    <label for="color">Select Color</label>
    <div class="select-wrapper">
        <select id="color">
            <option>Red</option>
            <option>Blue</option>
            <option>Yellow</option>
        </select>
        <i class="fa fa-chevron-down"></i>
    </div>
</fieldset>

SCSS

fieldset {
    .select-wrapper {
        position: relative;

        select {
            appearance: none;
            position: relative;
            z-index: 1;
            background: transparent;

            + i {
                position: absolute;
                top: 40%;
                right: 15px;
            }
        }
    }

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

যাইহোক, আপনি নির্বাচন উপাদান হিসাবে একই আকারে নির্বাচন মোড়ানো স্টাইল করতে পারেন এবং একই প্রভাব অর্জন করতে এর পটভূমি স্টাইল করতে পারেন।

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

পিএস এটি একটি উত্তর যা আমি এই বছরের শুরুর দিকে অন্য একটি নকল প্রশ্ন পোস্ট করেছি।

Answer 9

<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>

আপনি স্টাইলিংয়ের সাথে অন্তর্ভুক্ত করুন কেন আপনি নির্বাচনের বাইরে কোনও ডিভ যোগ করবেন না।

এবং স্টাইল তারপর সিএসএসে

.select{
    width: 100%;
    height: 45px;
    position: relative;
}
.select::after{
    content: '\f0d7';
    position: absolute;
    top: 0px;
    right: 10px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #0b660b;
    font-size: 45px;
    z-index: 2;

}
#dropdown{
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
            height: 45px;
            width: 100%;
        outline: none;
        border: none;
        border-bottom: 2px solid #0b660b;
        font-size: 20px;
        background-color: #0b660b23;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
}