মানে, একটি রেডিও বোতাম নিজেই একটি বৃত্তাকার আকৃতি এবং কেন্দ্রে একটি বিন্দু (যখন বোতামটি নির্বাচন করা হয়) নিয়ে গঠিত consists আমি যেটি পরিবর্তন করতে চাই তা হ'ল উভয়ের রঙ। সিএসএস ব্যবহার করে এটি করা যায়?
আমি কীভাবে রেডিও বোতামগুলির রঙ পরিবর্তন করব?
উত্তর:
রেডিও বোতামটি প্রতিটি ওএস / ব্রাউজারের জন্য নির্দিষ্ট একটি দেশীয় উপাদান। এর রঙ / স্টাইল পরিবর্তন করার কোনও উপায় নেই, যদি না আপনি কাস্টম চিত্রগুলি প্রয়োগ করতে চান বা কোনও কাস্টম জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে চান যা চিত্রগুলি অন্তর্ভুক্ত করে (উদাহরণস্বরূপ এটি - ক্যাশেড লিঙ্ক )
আমি তাই বিশ্বাস করি. আমি জানি যে কোনও ব্রাউজার রেডিও বোতামগুলির চেহারাটি কনফিগার করার উপায় উপস্থাপন করে না, এটি সম্পাদন করতে আপনাকে জেএস লাইব্রেরি ব্যবহার করতে হবে।
—
ফ্রেড
অথবা সিএসএস ব্যবহার করুন তবে আপনার যেমনটি বলেছিলেন তেমন চিত্রও আপনার প্রয়োজন। এটি কিছুটা অদ্ভুত
—
আতুরস্যামস
8/1/2014 পোস্ট করুন: এই পদ্ধতিটি এখন জমা দেওয়া ফর্ম ডেটা থেকে ইনপুট ক্ষেত্রটিকে অক্ষম করবে এবং সরিয়ে ফেলবে। চেকবক্সগুলি দৃষ্টির বাইরে রেখে দেওয়া সংস্থাগুলির অপব্যবহারের প্রতিক্রিয়া হিসাবে এটি তাদের ব্যবহারকারীদের অনুমতি এবং বিধিমালা সম্পর্কে সম্মতি জানিয়েছিল যেগুলি দর্শকদের এগিয়ে যাওয়ার আগে মূল্যায়ন করতে পারে না। আক্ষরিক বোতামটি যদি স্ক্রিনে প্রদর্শিত না হয় তবে এটি 'অক্ষম' হিসাবে বিবেচিত হবে
—
ppostma1
CSS ব্যবহার করে একটি আধুনিক সমাধানের জন্য নীচে আমার উত্তরটি পড়ুন।
—
ক্লিভিস
'এই' লিঙ্কটি বর্তমানে 404'র মতো। যদি এটি আবার ফিরে আসে তবে আমাদের জানান!
—
মার্ক্রেইস
একটি দ্রুত ফিক্সটি হ'ল রেডিও বোতাম ইনপুট স্টাইলটি ব্যবহার করে ওভারলে করা :afterহবে তবে আপনার নিজস্ব কাস্টম টুলকিট তৈরি করা সম্ভবত এটি আরও ভাল অনুশীলন।
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #ffa500;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
এটি আমার পক্ষে ভাল কাজ করেছে। দুর্দান্ত সমাধান যখন আপনি কোনও অতিরিক্ত উপাদান যুক্ত করতে বা চিত্র ব্যবহার করতে চান না।
—
সুইডেন
সাধারণ ব্রাউজারগুলিতে ":" পরে কেবল ধারক উপাদানগুলির জন্য স্টাইলিং গ্রহণ করা হয় - যেমন ডাব্লু 3 সি তে সংজ্ঞায়িত করা হয়েছে। ইনপুট কোনও ধারক নয় এবং সাধারণত স্টাইলিংয়ের পরে সমর্থন করে না। w3.org/TR/CSS2/generate.html#before-after-content
—
ইনা
পূর্ববর্তী পর্যবেক্ষণগুলি প্রয়োগ করতে কেবল একটি টাইমস্ট্যাম্প প্লপিং - এটি এখনও ক্রোমে কাজ করে (60.0.3112.90)। আমি এটি মাইক্রোসফ্ট এজ (38.14393.1066.0) এবং ফায়ারফক্স (54.0.1, 32-বিট) এ চেষ্টা করেছি তবে কোনও ডাইস নেই।
—
মার্ক্রেইজ
@Markreyes থেকে আপডেট করা হচ্ছে: Chrome এ ওয়ার্কস (64-বিট 73.0.3683.75), সাফারি কিছুটা কাজ করে (12.0.3), এবং 15 মার্চ 2019. ফায়ারফক্স কাজ (64-বিট 65.0.1) না
—
jarhill0
ফ্রেড যেমন উল্লেখ করেছেন, রঙ, আকার, ইত্যাদি সম্পর্কিত দেশি স্টাইলের রেডিও বোতামগুলির কোনও উপায় নেই। তবে আপনি প্রদত্ত যে কোনও রেডিও বোতামটির ইমপোস্টার সেটআপ করতে এবং এটি স্টাইল করতে সিএসএস সিউডো উপাদান ব্যবহার করতে পারেন। জ্যামিডি কী বলেছে তার প্রতি স্পষ্ট করে, আমরা কীভাবে এটি ব্যবহার করতে পারি: সিউডো উপাদানটির পরে, আপনি একটি পছন্দসই চেহারা অর্জনের জন্য: আগে এবং: উভয়ই ব্যবহার করতে পারেন।
এই পদ্ধতির সুবিধা:
- আপনার রেডিও বোতামটি স্টাইল করুন এবং সামগ্রীর জন্য একটি লেবেল অন্তর্ভুক্ত করুন।
- বাহিরের রিম রঙ এবং / অথবা চেক করা বৃত্তটি আপনার পছন্দ মতো যে কোনও রঙে পরিবর্তন করুন।
- ব্যাকগ্রাউন্ড কালার প্রোপার্টি এবং / অথবা অস্বচ্ছ সম্পত্তিটির useচ্ছিক ব্যবহারের পরিবর্তনের সাথে এটি স্বচ্ছ চেহারা দিন।
- আপনার রেডিও বোতামটির আকার স্কেল করুন।
- যেখানে প্রয়োজন সেখানে বিভিন্ন ড্রপ শ্যাডো বৈশিষ্ট্য যুক্ত করুন যেমন সিএসএস ড্রপ শ্যাডো ইনসেট
- এই সাধারণ সিএসএস / এইচটিএমএল ট্রিককে বিভিন্ন গ্রিড সিস্টেমে যেমন বুটস্ট্র্যাপ ৩.৩..6 মিশ্রণ করুন, সুতরাং এটি আপনার অন্যান্য বুটস্ট্র্যাপের উপাদানগুলিকে ভিজ্যুয়ালি মেলে।
নীচে সংক্ষিপ্ত ডেমো ব্যাখ্যা:
- প্রতিটি রেডিও বোতামের জন্য একটি আপেক্ষিক ইন-লাইন ব্লক সেট আপ করুন
- নেটিভ রেডিও বোতামটি লুকান এটিকে সরাসরি স্টাইল করার কোনও উপায় নেই।
- স্টাইল এবং লেবেল সারিবদ্ধ করুন
- এতে সিএসএস সামগ্রী পুনর্নির্মাণ: সিউডো-এলিমেন্টের 2 টি কাজ করার পূর্বে - রেডিও বোতামের বাইরের রিমটি স্টাইল করুন এবং উপাদানটি উপস্থিত হওয়ার আগে সেট করুন (লেবেলের সামগ্রীর বাম)। আপনি সিউডো-উপাদানগুলির উপর মৌলিক পদক্ষেপগুলি এখানে শিখতে পারেন - http://www.w3schools.com/css/css_pseudo_elements.asp
- যদি রেডিও বোতামটি চেক করা থাকে, তারপরে সিএসএস সামগ্রী (রেডিও বোতামের স্টাইলযুক্ত বিন্দু) প্রদর্শনের জন্য লেবেলের জন্য অনুরোধ করুন।
এইচটিএমএল
<div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>
<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>সিএসএস
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #666;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #004c97;
}এটি কার্যকর অবস্থায় দেখতে একটি ছোট ডেমো
উপসংহারে, কোনও জাভাস্ক্রিপ্ট, চিত্র বা ব্যাটারি প্রয়োজন নেই। খাঁটি সিএসএস
এই কৌশলটি ক্রোমে আমার জন্য কাজ করেছে (60.0.3112.90)। আমি এটি মাইক্রোসফ্ট এজ (38.14393.1066.0) এবং ফায়ারফক্স (54.0.1, 32-বিট) এও চেষ্টা করেছি।
—
মার্ক্রেজ
সাফারি ১১.১ (সর্বশেষ) এ আমার জন্য কাজ করে।
—
স্ট্যাক্সিম
আপনি যদি ওয়েবকিট-ভিত্তিক ব্রাউজারগুলি লক্ষ্য করে থাকেন (ক্রোম এবং সাফারি, সম্ভবত আপনি একটি ক্রোম ওয়েব অ্যাপ্লিকেশন বিকাশ করছেন, যিনি জানেন ...), আপনি নিম্নলিখিতগুলি ব্যবহার করতে পারেন:
input[type='radio'] {
-webkit-appearance: none;
}এবং তারপরে এটি স্টাইল করুন যেন এটি কোনও সাধারণ এইচটিএমএল উপাদান, উদাহরণস্বরূপ পটভূমি চিত্র প্রয়োগ করা।
input[type='radio']:activeবিকল্প গ্রাফিক্স সরবরাহ করতে কখন ইনপুট নির্বাচন করা হয় তার জন্য ব্যবহার করুন
আপডেট : 2018 পর্যন্ত আপনি একাধিক ব্রাউজার বিক্রেতাদের সমর্থন করতে নিম্নলিখিতগুলি যুক্ত করতে পারেন:
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
উপস্থিতি একটি পরীক্ষামূলক প্রযুক্তি হিসাবে লেবেলযুক্ত: বিকাশকারী.মোজিলা.আর.ইন.ইউএস
—
ডকস / ওয়েব
মোহন মত কাজ!
—
সুপারকুল
ব্যবহারের পরিবর্তে
—
দান
:active, আপনার :checked'নির্বাচিত' রেডিও বোতামগুলির মধ্যে স্টাইলকে আলাদা করতে ব্যবহার করা উচিত ।
আপনি দুটি খাঁটি সিএসএস উপায়ে কাস্টমাইজড রেডিও বোতামগুলি অর্জন করতে পারেন
সিএসএস ব্যবহার করে মানক উপস্থিতি সরিয়ে
appearanceএবং কাস্টম উপস্থিতি প্রয়োগ করে । দুর্ভাগ্যক্রমে এটি ডেস্কটপের জন্য আইই তে কাজ করে নি (তবে উইন্ডোজ ফোনের জন্য আইই তে কাজ করে)। ডেমো:input[type="radio"] { /* remove standard background appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ .flex { display: flex; align-items: center; }<div class="flex"> <input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label> </div>রেডিওবোটন লুকিয়ে এবং কাস্টম রেডিওব্লটনের উপস্থিতি
labelসিউডোলেক্ট্রিক্টারে সেট করে। উপায় দ্বারা এখানে নিখুঁত পজিশনিংয়ের প্রয়োজন নেই (আমি বেশিরভাগ ডেমোতে পরম অবস্থান দেখি)। ডেমো:*, *:before, *:after { box-sizing: border-box; } input[type="radio"] { display: none; } input[type="radio"]+label:before { content: ""; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; margin-right: 3px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked + label:before { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ label { display: flex; align-items: center; }<input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label>
সিএসএস ট্রিকগুলিতে বর্ণিত হিসাবে আপনি চেকবক্স হ্যাক ব্যবহার করতে পারেন
http://css-tricks.com/the-checkbox-hack/
রেডিও বোতামের কার্যকারী উদাহরণ:
http://codepen.io/Angelata/pen/Eypnq
input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}আইই 9 +, ফায়ারফক্স 3.5+, সাফারি 1.3+, অপেরা 6+, ক্রোমে যে কোনও কিছুতে কাজ করে।
আপনার জন্য সাধারণ ক্রস ব্রাউজার কাস্টম রেডিও বোতামের উদাহরণ
.checkbox input{
display: none;
}
.checkbox input:checked + label{
color: #16B67F;
}
.checkbox input:checked + label i{
background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
width: 15px;
height: 15px;
display: inline-block;
background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
background-size: 12px;
position: relative;
top: 1px;
left: -2px;
}<div class="checkbox">
<input type="radio" name="sort" value="popularity" id="sort1">
<label for="sort1">
<i></i>
<span>first</span>
</label>
<input type="radio" name="sort" value="price" id="sort2">
<label for="sort2">
<i></i>
<span>second</span>
</label>
</div>
এটি বুটস্ট্র্যাপের জন্য কাজ করছে না, আপনি বুটস্ট্র্যাপের মাধ্যমে আপডেট করতে পারবেন
—
কৃষ্ণ জোনালাগদদা
ওয়েল অতিরিক্ত উপাদানগুলি তৈরি করতে আমরা ব্যবহার করতে পারি: পরে,: আগে (সুতরাং আমাদের তেমন HTML পরিবর্তন করতে হবে না)। তারপরে রেডিও বোতাম এবং চেকবক্সগুলির জন্য আমরা ব্যবহার করতে পারি: চেক করা। আরও কয়েকটি সিউডো উপাদান রয়েছে যা আমরা পাশাপাশি ব্যবহার করতে পারি (যেমন: হোভার)। এর মিশ্রণ ব্যবহার করে আমরা কয়েকটি দুর্দান্ত কাস্টম ফর্ম তৈরি করতে পারি। এটা যাচাই কর
এই সিএসএসকে ট্রানজিশন দিয়ে দেখুন:
$DarkBrown: #292321;
$Orange: #CC3300;
div {
margin:0 0 0.75em 0;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color: $DarkBrown;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
cursor:pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"] + label span {
background-color:$DarkBrown;
}
input[type="radio"]:checked + label span{
background-color:$Orange;
}
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
-webkit-transition:background-color 0.4s linear;
-o-transition:background-color 0.4s linear;
-moz-transition:background-color 0.4s linear;
transition:background-color 0.4s linear;
}এইচটিএমএল:
<div>
<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span>Radio Button 1</label>
</div>
<div>
<input type="radio" id="radio02" name="radio" />
<label for="radio02"><span></span>Radio Button 2</label>
</div>সিউডো উপাদান এবং একটি লুকানো রেডিও ইনপুট বোতামটি ব্যবহার করে: খাঁটি সিএসএস এবং গ্রেডিয়েন্টগুলি দিয়ে কিছু খেলতে দেখানোর জন্য আমি @ ক্লেউইস কোড নমুনার আর একটি কাঁটা তৈরি করেছি ।
এইচটিএমএল:
sample radio buttons:
<div style="background:lightgrey;">
<span class="radio-item">
<input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
<label for="ritema">True</label>
</span>
<span class="radio-item">
<input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
<label for="ritemb">False</label>
</span>
</div>:
সিএসএস:
.radio-item input[type='radio'] {
visibility: hidden;
width: 20px;
height: 20px;
margin: 0 5px 0 5px;
padding: 0;
}
.radio-item input[type=radio]:before {
position: relative;
margin: 4px -25px -4px 0;
display: inline-block;
visibility: visible;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px inset rgba(150,150,150,0.75);
background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
content: "";
}
.radio-item input[type=radio]:checked:after {
position: relative;
top: 0;
left: 9px;
display: inline-block;
visibility: visible;
border-radius: 6px;
width: 12px;
height: 12px;
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
content: "";
}
.radio-item input[type=radio].true:checked:after {
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
}
.radio-item input[type=radio].false:checked:after {
background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
}
.radio-item label {
display: inline-block;
height: 25px;
line-height: 25px;
margin: 0;
padding: 0;
}পূর্বরূপ: https://www.codeply.com/p/y47T4ylfib
অন্যরা যেমন বলেছে, সমস্ত ব্রাউজারে এটি অর্জন করার কোনও উপায় নেই, তাই ক্রসব্রোজারকে করার সর্বোত্তম উপায় জাভাস্ক্রিপ্টটি নিরবচ্ছিন্নভাবে ব্যবহার করা। মূলত আপনাকে নিজের রেডিওবটনকে লিঙ্কগুলিতে পরিণত করতে হবে (সিএসএসের মাধ্যমে সম্পূর্ণ কাস্টমাইজযোগ্য)। লিঙ্কের প্রতিটি ক্লিক সম্পর্কিত রেডিওবক্সের সাথে আবদ্ধ হবে, তার রাজ্য এবং সমস্ত অন্যান্য টগল করে।
স্টাইলযুক্ত লেবেলে রেডিও-বোতামটি বাঁধতে সহায়ক হতে পারে। এই উত্তরে আরও বিশদ ।
আপনি রেডিও ইনপুটটিতে একটি স্প্যান উপাদান এম্বেড করতে পারেন তারপরে যখন কোনও রেডিও ইনপুট চেক করা হয় তখন রেন্ডার করার জন্য আপনার পছন্দসই রঙ নির্বাচন করুন। ডাব্লু 3 স্কুল থেকে উত্সাহিত নীচের উদাহরণটি দেখুন।
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<body>
<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</body>নীচে এই কোড বিভাগে পটভূমি রঙ পরিবর্তন কৌশলটি করে।
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}কীভাবে কাস্টম রেডিও বোতাম তৈরি করবেন তা থেকে উত্সাহিত
একটি সাধারণ ফিক্স হ'ল নিম্নলিখিত সিএসএস সম্পত্তিটি ব্যবহার করা।
input[type=radio]:checked{
background: \*colour*\;
border-radius: 15px;
border: 4px solid #dfdfdf;
}