จะเปลี่ยนขนาดของปุ่มตัวเลือกโดยใช้ CSS ได้อย่างไร?

มีวิธีควบคุมขนาดของปุ่มตัวเลือกใน CSS หรือไม่?

ได้คุณควรกำหนดความสูงและความกว้างได้เช่นเดียวกับองค์ประกอบใด ๆ อย่างไรก็ตามเบราว์เซอร์บางตัวไม่ได้คำนึงถึงคุณสมบัติเหล่านี้จริงๆ

การสาธิตนี้ให้ภาพรวมของสิ่งที่เป็นไปได้และวิธีการแสดงผลในเบราว์เซอร์ต่างๆ: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

อย่างที่คุณเห็นปุ่มตัวเลือกการจัดแต่งทรงผมไม่ใช่เรื่องง่าย :-D

วิธีแก้ปัญหาคือใช้ JavaScript และ CSS เพื่อแทนที่ปุ่มตัวเลือกและองค์ประกอบฟอร์มอื่น ๆ ด้วยรูปภาพที่กำหนดเอง:

• https://github.com/emblematiq/Niceforms
• https://web.archive.org/web/20161119112447/http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

css นี้ดูเหมือนจะทำเคล็ดลับ:

input[type=radio] {
    border: 0px;
    width: 100%;
    height: 2em;
}

การตั้งค่าเส้นขอบเป็น 0 ดูเหมือนจะช่วยให้ผู้ใช้เปลี่ยนขนาดของปุ่มและให้เบราว์เซอร์แสดงผลในขนาดนั้นเช่น ความสูงข้างต้น: 2em จะแสดงปุ่มที่ความสูงของเส้นสองเท่า นอกจากนี้ยังใช้ได้กับช่องทำเครื่องหมาย ( input[type=checkbox]) เบราว์เซอร์บางตัวแสดงผลได้ดีกว่าเบราว์เซอร์อื่น ๆ

จากกล่อง windows ใช้งานได้ใน IE8 +, FF21 +, Chrome29 +

คำถามเดิม CSS3แต่ตอนนี้มีวิธีง่ายๆที่เข้ากันได้กับเบราว์เซอร์ส่วนใหญ่ซึ่งก็คือการใช้งาน ฉันทดสอบใน IE, Firefox และ Chrome และใช้งานได้

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

คุณสามารถควบคุมขนาดของปุ่มตัวเลือกด้วยสไตล์ css:

style = "height: 35px; width: 35px;"

สิ่งนี้ควบคุมขนาดปุ่มตัวเลือกโดยตรง

<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">

ไม่โดยตรง ในความเป็นจริงองค์ประกอบแบบฟอร์มโดยทั่วไปอาจเป็นปัญหาหรือเป็นไปไม่ได้ที่จะจัดสไตล์โดยใช้ CSS เพียงอย่างเดียว แนวทางที่ดีที่สุดคือ:

1. ซ่อนปุ่มตัวเลือกโดยใช้จาวาสคริปต์
2. ใช้ javascript เพื่อเพิ่ม / แสดง HTML ที่สามารถจัดรูปแบบตามที่คุณต้องการเช่น
3. กำหนดกฎ css สำหรับสถานะที่เลือกซึ่งทริกเกอร์โดยการเพิ่มคลาส "ที่เลือก" ลงในช่วงระยะเวลา
4. สุดท้ายเขียนจาวาสคริปต์เพื่อทำให้สถานะของปุ่มตัวเลือกตอบสนองต่อการคลิกบนสแปนและในทางกลับกันเพื่อให้สแปนตอบสนองต่อการเปลี่ยนแปลงสถานะของปุ่มตัวเลือก (สำหรับเมื่อผู้ใช้ใช้แป้นพิมพ์เพื่อเข้าถึงแบบฟอร์ม) ส่วนที่สองอาจเป็นเรื่องยุ่งยากในการทำงานกับเบราว์เซอร์ทั้งหมด ฉันใช้สิ่งต่อไปนี้ (ซึ่งใช้ 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");
}

html

<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>

การปรับขนาดวิดเจ็ตเริ่มต้นใช้ไม่ได้ในทุกเบราว์เซอร์ แต่คุณสามารถสร้างปุ่มตัวเลือกแบบกำหนดเองด้วย JavaScript ได้ วิธีหนึ่งคือการสร้างปุ่มตัวเลือกที่ซ่อนอยู่แล้ววางภาพของคุณเองบนเพจของคุณ การคลิกที่รูปภาพเหล่านี้จะเปลี่ยนรูปภาพ (แทนที่รูปภาพที่คลิกด้วยรูปภาพด้วยปุ่มตัวเลือกในสถานะที่เลือกและแทนที่รูปภาพอื่นด้วยปุ่มตัวเลือกในสถานะที่ไม่ได้เลือก) และเลือกปุ่มตัวเลือกใหม่

อย่างไรก็ตามมีเอกสารเกี่ยวกับเรื่องนี้ ยกตัวอย่างเช่นการอ่าน: จัดแต่งทรงผมช่องทำเครื่องหมายและวิทยุปุ่มด้วย CSS และ JavaScript

นี่คือแนวทางหนึ่ง ตามค่าเริ่มต้นปุ่มตัวเลือกมีขนาดใหญ่กว่าป้ายกำกับประมาณสองเท่า
(ดูโค้ด CSS และ HTML ที่ท้ายคำตอบ)

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9 (ความไม่ชัดเจนไม่ใช่ความผิดของ IE โฮสต์การทดสอบบน netrenderer.com)

CSS:

.sortOptions > label {
    font-size:          8px;
}

.sortOptions > input[type=radio] {
    width:              10px;
    height:             10px;
}

HTML:

<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>                

โดยตรงคุณไม่สามารถทำได้ [ตามความรู้ของฉัน].

คุณควรใช้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);}

โซลูชันที่ใช้งานได้ดีมีคำอธิบายไว้ที่นี่: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio

แนวคิดคือการใช้คุณสมบัติ (-moz-Appearance) ซึ่งเมื่อตั้งค่าเป็นไม่มีจะอนุญาตให้เปลี่ยนความกว้างและความสูงของปุ่มตัวเลือก นอกจากนี้คุณสามารถเพิ่มเอฟเฟกต์อื่น ๆ เช่นการเปลี่ยนภาพและสิ่งของต่างๆ

นี่คือตัวอย่าง:

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
  outline: unset !important /* I added this one for Edge (chromium) support */
}

ข้อเสียเปรียบเพียงประการเดียวคือยังไม่รองรับ IE

ลองใช้รหัสนี้ ... อาจเป็นคำตอบที่คุณต้องการ

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">&nbsp;&nbsp;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">&nbsp;&nbsp;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">&nbsp;&nbsp;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">&nbsp;&nbsp;Ich will vier</label>
        </span>
    </div>
</form>

    </body>
</html>