রেডিও বোতামগুলির পরিবর্তে চিত্রগুলি ব্যবহার করুন

Question

যদি আমার বোতামগুলির সাথে একটি রেডিও গ্রুপ থাকে:

... আমি কীভাবে কেবল বাটনগুলির পরিবর্তে বাছাই বিকল্পে চিত্রগুলি প্রদর্শন করতে পারি, যেমন

Comments

আমরা কি আপনার কোডের জন্য একটি লাইভ লিঙ্ক বা একটি জেএসফিডাল দেখতে পারি?

— নীতেশ

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

— Chiragit007

এটি এখানে কাজ করছে না আপনি স্ট্যাকওভারফ্লো.com

— কোড গাই

Answer 1

• মোড়ানো রেডিও এবং ইমেজ মধ্যে<label>
• রেডিও বোতামটি লুকান (ব্যবহার করবেন না display:noneবা visibility:hiddenযেহেতু এগুলি অ্যাক্সেসযোগ্যতার উপর প্রভাব ফেলবে)
• সংলগ্ন ভাইবোন নির্বাচক ব্যবহার করে লুকানো রেডিওর পাশের চিত্রটিকে লক্ষ্য করুন +

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>

_{আপনার লেবেলে ক্লাস যুক্ত করতে ভুলবেন না এবং সিএসএসের পরিবর্তে সেই শ্রেণিটি ব্যবহার করুন।}

---

কাস্টম শৈলী এবং অ্যানিমেশন

<i>উপাদান এবং :afterসিউডো ব্যবহার করে এখানে একটি উন্নত সংস্করণ রয়েছে :

body{color:#444;font:100%/1.4 sans-serif;}


/* CUSTOM RADIO & CHECKBOXES
   http://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.rad > i,
.ckb > i{ 
  display: inline-block;
  vertical-align: middle;
  width:  16px;
  height: 16px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid gray;
  background: gray;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
  width: 25px;
  border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: gray;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: orange;
}
/* CHECKBOX */
.ckb > input + i:after{
  content: "";
  display: block;
  height: 12px;
  width:  12px;
  margin: 2px;
  border-radius: inherit;
  transition: inherit;
  background: gray;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
  margin-left: 11px;
  background:  orange;
}

<label class="rad">
  <input type="radio" name="rad1" value="a">
  <i></i> Radio 1
</label>
<label class="rad">
  <input type="radio" name="rad1" value="b" checked>
  <i></i> Radio 2
</label>

<br>

<label class="ckb">
  <input type="checkbox" name="ckb1" value="a" checked>
  <i></i> Checkbox 1
</label>
<label class="ckb">
  <input type="checkbox" name="ckb2" value="b">
  <i></i> Checkbox 2
</label>

Comments

সিউডো নির্বাচকটির জন্য +1, আমি মনে করি নির্বাচিতদের পরীক্ষা করার জন্য আমি অতীতে জাভাস্ক্রিপ্ট ব্যবহার করেছি! এটি আমাকে শিখিয়ে দেবে ...

— জিক

দৃশ্যমানতার আড়াল হওয়ার অর্থ এটি ক্লিকযোগ্য নয়, এবং অবস্থানের নিখুঁতভাবে এটি নথির প্রবাহের বাইরে নিয়ে যায়

— 99 সমস্যা - সিনট্যাক্স এক

এটি একটি দুর্দান্ত উত্তর। আমি একই সাথে কাজ করে যে যোগ করতে পারেন type="checkbox"।

— ওয়াটওয়ার

ঠিক আছে এটি দুর্দান্ত .. দুর্দান্ত কাজ করে, স্পষ্টতই আইইয়ের উপরও কাজ করে, তবে বাস্তবে তা হয় না। চিত্রটি সঠিকভাবে আচরণ করে তবে ফর্মটি জমা দেওয়ার পরে কোনও থাম্বনেইল নির্বাচন নেই selection আমার ধারণা আমি উইন 8.1 এর সাথে আসা নতুন আইই ব্যবহার করছি। কোন ধারণা?

— জুনেদ রেহমান

পার্টিতে দেরিতে হলেও এ বিষয়ে সাবধানতা অবলম্বন করুন। Visibility:hiddenস্ক্রিন রিডার থেকে ইনপুটগুলি এবং অ্যাক্সেসিবিলিটি অবস্থান থেকে কোনও বড় কোনওটি আড়াল করবে।

— ডিপ্যাক

Answer 2

উদাহরণ:

মাথা উঁচু করে! এই সমাধানটি কেবল CSS- এর।

আমি আপনাকে সিএসএস 3 এর সুবিধা নেওয়ার পরামর্শ দিচ্ছি, সিএসএস 3 বিধি সহ বাই-ডিফল্ট ইনপুট রেডিও বোতামটি রেখে:

.options input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

আমি কিছুদিন আগে একটি উদাহরণ তৈরি করেছি।

• JSFiddle
• রেডিও-বোতামগুলির জন্য কীভাবে চিত্রগুলি ব্যবহার করবেন - সংক্ষেপে

Comments

এই দুর্দান্ত ছিল! আমি এএসপি.এনইটি ফর্মের সাথে এটি সংহত করেছি এবং এটি একটি কবজির মতো কাজ করেছে :)

— গাস

এই উদাহরণটি এক্সুবুন্টু 16.04.1 এর অধীনে ফায়ারফক্স 49.0.2 এ কাজ করে না

— সের্গে

@ সের্গেইকুডিয়াভটসেভ হয়ত কোডটির প্রয়োজন এবং আপডেট করুন (এই উত্তরটি ২০১৩ সালের) from ধন্যবাদ এটির উন্নতি করার জন্য কোডটি সবার জন্য উন্মুক্ত। আমি শীঘ্রই এটি একবার দেখুন। চিয়ার্স।

— রিচার্ড Cotrina

ফায়ারফক্স 60, উইন্ডোজ 10 এ আমার জন্য দুর্দান্ত কাজ করে

— ট্রেভর

আমি 3 টি স্মাইলি মুখের সেটটির জন্য এই কাজ করছি। এখন আমার এক ফর্মের একাধিক সারি থাকা দরকার, প্রত্যেকটির নিজের মুখের স্মাইলি রয়েছে। আমার সমস্যাটি হ'ল যখন এক সারিটি পরিবর্তন করা হয় তখন তারা সমস্ত পরিবর্তন হয়। কোন ধারণাটি সম্পন্ন করার জন্য কোন অংশে সংশোধন করা দরকার?

— dave317

Answer 3

আপনি এটির জন্য সিএসএস ব্যবহার করতে পারেন।

এইচটিএমএল (শুধুমাত্র ডেমোর জন্য, এটি কাস্টমাইজযোগ্য)

<div class="button">
    <input type="radio" name="a" value="a" id="a" />
    <label for="a">a</label>
</div>
<div class="button">
    <input type="radio" name="a" value="b" id="b" />
    <label for="b">b</label>
</div>
<div class="button">
    <input type="radio" name="a" value="c" id="c" />
    <label for="c">c</label>
</div>
...

সিএসএস

input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + label {
    border: 1px solid red;
}

jsFiddle

Answer 4

রেডিও বোতামগুলি লুকিয়ে রাখুন, এবং চিত্রগুলিতে ক্লিক করার পরে, জাভাস্ক্রিপ্ট ব্যবহার করে সেগুলি নির্বাচন করুন এবং আপনার চিত্রটি নির্বাচনের মতো দেখায়। এখানে মার্কআপ -

<div id="radio-button-wrapper">
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
</div>

এবং জেএস

 $(".image-radio img").click(function(){
     $(this).prev().attr('checked',true);
 })

সিএসএস

span.image-radio input[type="radio"]:checked + img{
    border:1px solid red;
}

Answer 5

শুধুমাত্র কিছু লুকানোর জন্য একটি শ্রেণি ব্যবহার করা হচ্ছে ... https://stackoverflow.com/a/17541916/1815624 এর উপর ভিত্তি করে

/* HIDE RADIO */
.hiddenradio [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
  outline: 2px solid #f00;
}

<div class="hiddenradio">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>

<div class="">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>

Answer 6

এখানে উদাহরণের উপর ভিত্তি করে একটি সাধারণ jQuery UI সমাধান রয়েছে:

http://jqueryui.com/button/#radio

সংশোধিত কোড:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
    <input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
  </div>
</form>

</body>
</html>

jQueryUI চিত্রের পটভূমির যত্ন নেয় যাতে আপনি জানেন যে কোন বোতামটি চেক করা আছে।

সাবধানতা: জাভাস্ক্রিপ্টের মাধ্যমে আপনি যদি চেক বা চেক না করাতে একটি বোতাম সেট করতে চান তবে আপনাকে অবশ্যই রিফ্রেশ ফাংশনটি কল করতে হবে:

        $('#radio3').prop('checked', true).button("refresh");

Answer 7

লেবেল এবং স্প্যান উপাদান ব্যবহার করে চিত্রগুলি রেডিও বোতামের জায়গায় স্থাপন করা যেতে পারে।

   <div class="customize-radio">
        <label>Favourite Smiley</label><br>
        <label for="hahaha">
        <input type="radio" name="smiley" id="hahaha">
        <span class="haha-img"></span>
        HAHAHA
        </label>
        <label for="kiss">
        <input type="radio" name="smiley" id="kiss">
        <span class="kiss-img"></span>
        Kiss
        </label>
        <label for="tongueOut">
        <input type="radio" name="smiley" id="tongueOut">
        <span class="tongueout-img"></span>
        TongueOut
        </label>
    </div>

রেডিও বোতামটি লুকানো উচিত,

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

স্প্যান ট্যাগটিতে চিত্র দেওয়া যেতে পারে,

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('hahabefore.png');
}

.kiss-img{
    background-image: url('kissbefore.png');
}
.tongueout-img{
    background-image: url('tongueoutbefore.png');
}

রেডিও বোতামের ক্লিকে চিত্রটি পরিবর্তন করতে, ইনপুট ট্যাগে পরীক্ষিত রাষ্ট্র যুক্ত করুন,

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('tongueout.png');
}

আপনার যদি কোনও প্রশ্ন থাকে তবে নীচের লিঙ্কটি দেখুন, যেমন আমি নীচের ব্লগ থেকে সমাধান নিয়েছি, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

Answer 8

এখানে খুব সহজ উদাহরণ

input[type="radio"]{
   display:none;
}

input[type="radio"] + label
{
    background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png);
    background-size: 100px 100px;
    height: 100px;
    width: 100px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}

input[type="radio"]:checked + label
{
    background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png);
}

<div>
  <input type="radio" id="shipadd1" value=1 name="address" />
  <label for="shipadd1"></label>
  value 1
</div>

<div>
  <input type="radio" id="shipadd2" value=2 name="address" />
  <label for="shipadd2"></label>
  value 2
</div>

ডেমো: http://jsfiddle.net/La8wQ/2471/

এই কৌশলটির ভিত্তিতে এই উদাহরণ: https://css-tricks.com/the-checkbox-hack/

আমি এটি পরীক্ষিত করেছি: ক্রোম, ফায়ারফক্স, সাফারি