সিএসএসে রেডিও বোতামের আকার নিয়ন্ত্রণ করার কোনও উপায় আছে কি?
সিএসএস ব্যবহার করে কীভাবে রেডিও বোতামের আকার পরিবর্তন করবেন?
উত্তর:
হ্যাঁ, আপনি যে কোনও উপাদান হিসাবে তার উচ্চতা এবং প্রস্থ সেট করতে সক্ষম হওয়া উচিত। তবে কিছু ব্রাউজার এই বৈশিষ্ট্যগুলিকে আমলে নেয় না।
এই ডেমোটি কীভাবে সম্ভব এবং কীভাবে এটি বিভিন্ন ব্রাউজারে প্রদর্শিত হয় তার একটি সংক্ষিপ্তসার দেয়: https://www.456bereastreet.com
আপনি দেখতে পাবেন, রেডিও বোতাম স্টাইল করা সহজ নয় :-D
একটি কার্যপ্রণালী হ'ল জাভাস্ক্রিপ্ট এবং সিএসএস ব্যবহার করে রেডিও বোতামগুলি এবং কাস্টম চিত্রগুলির সাথে অন্যান্য ফর্মের উপাদানগুলি প্রতিস্থাপন করতে:
4
প্রস্থ এবং উচ্চতা উভয়ই নির্ধারণ করুন এবং এম মেট্রিক ব্যবহার করুন: প্রস্থ: 1.2 এম; উচ্চতা: 1.2 মি;
—
ইমান
এখন আপনি CSS3 ব্যবহার করতে পারেন , এবং এটি কাজ করে।
—
জোও পিমেন্টেল
এই CSS টি কৌশলটি মনে হচ্ছে:
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}
সীমানাটি 0-এ সেট করা ব্যবহারকারীকে বোতামের আকার পরিবর্তন করতে এবং ব্রাউজারটিকে সেই আকারে উদাহরণস্বরূপ রেন্ডার করার অনুমতি দেয় seems উপরের উচ্চতা: 2 এম লাইন উচ্চতার দ্বিগুণ বোতামটি রেন্ডার করবে। এটি চেকবাক্সগুলির জন্যও কাজ করে ( input[type=checkbox])। কিছু ব্রাউজার অন্যদের চেয়ে ভাল রেন্ডার করে।
উইন্ডোজ বাক্স থেকে এটি IE8 +, FF21 +, Chrome29 + এ কাজ করে।
ক্রোমিয়ামে আমার জন্য ক্ষুদ্রটি তৈরি করুন।
—
পকেটস্যান্ড
পুরানো প্রশ্ন কিন্তু এখন একটি সহজ সমাধান রয়েছে, যা বেশিরভাগ ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ CSS3। আমি IE, ফায়ারফক্স এবং ক্রোমে পরীক্ষা করেছি এবং এটি কার্যকর হয়।
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
1.5আপনার প্রয়োজন অনুযায়ী মানটি 50% আকারে বৃদ্ধি করুন। অনুপাতটি খুব বেশি হলে এটি রেডিও বোতামটি অস্পষ্ট করতে পারে। পরবর্তী চিত্রটি 1.5 অনুপাত দেখায়।
এই সমাধানটি যদিও কাজ করে তবে রেডিও বোতামকে ঝাপসা করে। এটি ব্যবহার করবেন না।
—
ভাদিম
এটি স্কেলের পরিমাণের উপর নির্ভর করবে। 1.5 এর অনুপাতে এটি ঠিক আছে।
—
জোয়াও মধ্যে Pimentel ফেরেইরা
আপনি স্কেলের পরিমাণ নিয়ন্ত্রণ করতে পারবেন না। কোনও ব্যবহারকারী জুম বাড়ানোর (ডেস্কটপ বা একটি মোবাইল ডিভাইসে থাকা) সিদ্ধান্ত নিতে পারে, সেক্ষেত্রে রেডিও বোতামগুলি ভয়ঙ্কর দেখাবে।
—
ভাদিম 21
@ ভাদিম আমি এখন ক্রোমে পরীক্ষা করেছি, 1.5 এবং অনুপাতের 300% অনুপাতটি যথাযথভাবে ঠিক আছে।
—
জোয়াও মধ্যে Pimentel ফেরেইরা
আমার তুলনামূলকভাবে কম রেজোলিউশন মনিটরে (1920 x 1080), রেডিও বোতামটি 100% এর জুম স্তরেও বেশ ঝাপসা। রেটিনা প্রদর্শনগুলিতে এটি আরও ঝাপসা হয়ে যাবে। আজকাল এমনকি নির্দিষ্ট সেল ফোনের উচ্চতর রেজোলিউশন রয়েছে যা আমার মনিটর। আমি আগে যেমন বলেছি, আপনি কোনও চিত্রের স্কেলিং নিয়ন্ত্রণ করতে পারবেন না। কিছু স্ক্রিনে এটি দেখতে ঠিক আছে। এটি আপনার পক্ষে ঠিক আছে, তবে সমাধানটি সর্বজনীন নয়।
—
ভাদিম
আপনি CSS স্টাইল দিয়ে রেডিও বোতামের আকার নিয়ন্ত্রণ করতে পারেন:
শৈলী = "উচ্চতা: 35px; প্রস্থ: 35px;"
এটি সরাসরি রেডিও বোতামের আকার নিয়ন্ত্রণ করে।
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
এটি মুছে ফেলা রোধ করতে, দয়া করে সম্পাদনা করুন এবং ব্যাখ্যা করুন যে এটি কেন কাজ করে।
—
রোহিত গুপ্ত
@ রোহিত গুপ্ত আপনি স্টাইলটি পরিবর্তন করতে পারেন = "উচ্চতা: 35 পিক্স; প্রস্থ: 35px;" রেডিও বোতামের আকার নিয়ন্ত্রণ করতে।
—
তারিক
আমি এটি চেষ্টা করেছি এবং বেশ অবাক হয়েছি যে এটি আইই, এজ এবং ক্রোমে দুর্দান্ত কাজ করেছে। ফায়ারফক্স, এত কিছু না।
—
zippy72
সরাসরি নয় প্রকৃতপক্ষে, সাধারণভাবে ফর্ম উপাদানগুলি কেবল CSS ব্যবহার করে স্টাইল করা সমস্যাযুক্ত বা অসম্ভব। সর্বোত্তম পন্থা হ'ল:
- জাভাস্ক্রিপ্ট ব্যবহার করে রেডিও বোতামটি লুকান।
- এইচটিএমএল যুক্ত করতে / প্রদর্শন করতে জাভাস্ক্রিপ্ট ব্যবহার করুন যা আপনার যেমন পছন্দ করে তা স্টাইল করা যায়
- নির্বাচিত রাষ্ট্রের জন্য সিএসএস বিধিগুলি সংজ্ঞায়িত করুন, যা ইয়ুর স্প্যানটিতে "নির্বাচিত" শ্রেণি যুক্ত করে ট্রিগার করা হয়।
- পরিশেষে, স্প্যানের ক্লিকগুলিতে রেডিও বোতামের রাষ্ট্রের প্রতিক্রিয়া তৈরি করতে জাভাস্ক্রিপ্ট লিখুন এবং বিপরীতে, রেডিও বোতামের অবস্থার পরিবর্তনের ক্ষেত্রে স্প্যানটি পেতে (যখন ব্যবহারকারীরা ফর্মটি অ্যাক্সেস করার জন্য কীবোর্ড ব্যবহার করেন)। এর দ্বিতীয় অংশটি সমস্ত ব্রাউজার জুড়ে কাজ করা কঠিন। আমি নিম্নলিখিতগুলির মতো কিছু ব্যবহার করি (যা jQuery ব্যবহার করে। আমি ইনপুট লেবেলে সরাসরি "নির্বাচিত" শ্রেণিটি স্টাইল করে এবং প্রয়োগ করে অতিরিক্ত স্প্যান যোগ করা এড়াতে পারি)।
জাভাস্ক্রিপ্ট
var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
if (this.checked) {
select($(this).parent());
}
}).find("label").bind("click", function (event) { //mouse use
select($(this));
});
function select(el) {
labels.removeClass("selected");
el.addClass("selected");
}
এইচটিএমএল
<ul class="radioButtons">
<li>
<label for="employee1">
employee1
<input type="radio" id="employee1" name="employee" />
</label>
</li>
<li>
<label for="employee2">
employee1
<input type="radio" id="employee2" name="employee" />
</label>
</li>
</ul>
ডিফল্ট উইজেটের আকার পরিবর্তন করা সমস্ত ব্রাউজারে কাজ করে না, তবে আপনি জাভাস্ক্রিপ্ট দিয়ে কাস্টম রেডিও বোতাম তৈরি করতে পারেন। অন্যতম উপায় হ'ল লুকানো রেডিও বোতাম তৈরি করা এবং তারপরে আপনার নিজের ইমেজগুলি আপনার পৃষ্ঠায় স্থাপন করা। এই চিত্রগুলিতে ক্লিক করা চিত্রগুলি পরিবর্তন করে (একটি নির্বাচিত অবস্থায় রেডিও বোতামের সাহায্যে ক্লিক করা চিত্রটি প্রতিস্থাপন করে এবং অন্য চিত্রগুলিকে একটি অনির্বাচিত অবস্থায় রেডিও বোতামগুলির সাথে প্রতিস্থাপন করে) এবং নতুন রেডিও বোতামটি নির্বাচন করে।
যাইহোক, এই বিষয়ে নথি আছে। উদাহরণস্বরূপ, এটি পড়ুন: সিএসএস এবং জাভাস্ক্রিপ্ট সহ স্টাইলিং চেকবক্স এবং রেডিও বোতামগুলি ।
এখানে একটি পদ্ধতির। ডিফল্টরূপে রেডিও বোতামগুলি লেবেলের চেয়ে প্রায় দ্বিগুণ বড় ছিল।
(উত্তরের শেষে সিএসএস এবং এইচটিএমএল কোড দেখুন)
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 (অস্পষ্টতা আইই এর দোষ নয়, নেট্রেন্ডার ডটকম এ হোস্ট টেস্ট)
সিএসএস:
.sortOptions > label {
font-size: 8px;
}
.sortOptions > input[type=radio] {
width: 10px;
height: 10px;
}
এইচটিএমএল:
<div class="rightColumn">Answers
<span class="sortOptions">
<input type="radio" name="answerSortList" value="credate"/>
<label for="credate">Creation</label>
<input type="radio" name="answerSortList" value="lastact"/>
<label for="lastact">Activity</label>
<input type="radio" name="answerSortList" value="score"/>
<label for="score">Score</label>
<input type="radio" name="answerSortList" value="upvotes"/>
<label for="upvotes">Up votes</label>
<input type="radio" name="answerSortList" value="downvotes"/>
<label for="downvotes">Down Votes</label>
<input type="radio" name="answerSortList" value="accepted"/>
<label for="downvotes">Accepted</label>
</span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
</div>
</body>
</html>
উত্তর দেওয়ার জন্য ধন্যবাদ, কিছু ব্যাখ্যা সুন্দর হবে :)
—
থায়ার এম আল-আজলৌনি
সরাসরি আপনি এটি করতে পারবেন না। [আমার জ্ঞান অনুসারে]
imagesআপনার রেডিও বোতামগুলি সরবরাহ করার জন্য ব্যবহার করা উচিত । আপনি এগুলি একেবারে কেস রেডিও বোতামগুলির মতোই কাজ করতে পারেন এবং আপনি তাদের যে কোনও আকার তৈরি করতে পারেন।
এই উত্তরটি অত্যন্ত অপ্রত্যাশিত - অবশ্যই আপনি এটি সরাসরি করতে পারেন। এবং না আপনার প্রথম বারে ছবি ব্যবহার করার চেষ্টা করা উচিত নয় - এটি আপনার পৃষ্ঠায় অতিরিক্ত অকারণে ফুলে উঠবে
—
জসদীপ খালসা
এটি আমার জন্য সমস্ত ব্রাউজারে দুর্দান্ত কাজ করে:
(সরলতার জন্য ইনলাইন স্টাইল ...)
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>
লেবেলের ফন্ট-আকারের সাথে রেডিও বোতাম এবং পাঠ্য উভয়েরই আকার পরিবর্তন হবে।
আপনি স্কেল প্রয়োজনীয় মান সহ ট্রান্সফর্ম সম্পত্তিও ব্যবহার করতে পারেন:
input[type=radio]{transform:scale(2);}
এই কোডটি ব্যবহার করে দেখুন ... আপনি ঠিক যা খুঁজছেন তা উত্তর হতে পারে
body, html{
height: 100%;
background: #222222;
}
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h2 {
color: #AAAAAA;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Male</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Female</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Transgender</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং / বা কেন এটি সমস্যার সমাধান করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করলে উত্তরের দীর্ঘমেয়াদী মান উন্নত হবে। মানের উত্তর সরবরাহ করার জন্য দয়া করে এই কীভাবে উত্তরটি পড়ুন।
—
ওয়েওওয়েওয়ের
আপনার মন্তব্য এবং দিকনির্দেশের জন্য আপনাকে ধন্যবাদ। স্ট্যাক ওভারফ্লো এর নতুন নতুন আমি এই উত্তরগুলি গুগলের সাহায্যে সন্ধান করেছি যাতে আমি এটি অন্যদের বারও বাঁচাতে পারি। সুতরাং আমি এখানে এটি পোস্ট ...
—
মৌসুমী
@ মৌসুমী হ্যাঁ, তবে কীভাবে এবং কীভাবে কাজ হয় সে সম্পর্কে আরও কিছু অতিরিক্ত ব্যাখ্যা এটিকে আরও ভাল স্ট্যাকের ওভারফ্লো উত্তর হিসাবে চিহ্নিত করবে :-)
—
স্টারবিয়াম্রেনবোলাব
<html>
<head>
</head>
<body>
<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
var groupelements = document.getElementById(groupelement);
var buttons = groupelements.getElementsByTagName("button");
for (i=0;i<buttons.length;i++) {
if (buttons[i].id.indexOf("_on") != -1) {
buttons[i].style.display="none";
} else {
buttons[i].style.display="block";
}
}
var buttonON = buttonelement + "_button_on";
var buttonOFF = buttonelement + "_button_off";
document.getElementById(buttonON).style.display="block";
document.getElementById(buttonOFF).style.display="none";
document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>
<form>
<h1>farbige Radiobutton</h1>
<div id="button_group">
<input type="hidden" name="button_value" id="button_value" value=""/>
<span class="radiobuttons">
<button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
<button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
<label for="button1_button_on"> Ich will eins</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
<button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
<label for="button2_button_on"> Ich will zwei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
<button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
<label for="button3_button_on"> Ich will drei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
<button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
<label for="button4_button_on"> Ich will vier</label>
</span>
</div>
</form>
</body>
</html>
এটি কীভাবে কাজ করে সে সম্পর্কে মন্তব্য বা বিবরণ দেওয়া উপকারী হত।
—
জেমস এ মোহলার
এবং আপনার উত্সটির শুরুতে কাঠামোগত ত্রুটি না থাকার জন্য এটি দরকারী হত।
—
মিস্টার লিস্টার