代码之家  ›  专栏  ›  技术社区  ›  Joel Coehoorn

你能把一个html单选按钮设计成一个复选框吗?

  •  51
  • Joel Coehoorn  · 技术社区  · 16 年前

    在屏幕上,我想保持单选按钮的原样,以强制和沟通单选按钮的使用(只选择一个选项)。但是,当它打印出来时,我需要它使用方形复选框样式而不是圆形单选按钮样式打印。我知道如何使用媒体选择器来设置仅打印的样式,所以这不是问题所在。只是我不知道我是否能随心所欲地设计单选按钮。

    如果我做不到这一点,我将不得不创建一个复选框来隐藏每个单选按钮,使用javascript来保持复选框和单选按钮的同步,使用css在适当的媒体中显示我关心的那个。很明显,如果我能把它们做成样式,就可以节省很多工作。

    8 回复  |  直到 14 年前
        1
  •  103
  •   myfunkyside    8 年前

    在这个问题发布三年后,这几乎是触手可及的。事实上,在Firefox1+、Chrome1+、Safari3+和Opera15+中,使用 CSS3 appearance 财产。

    其结果是类似于复选框的无线电元素:

    input[type="radio"] {
      -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
      -moz-appearance: checkbox;    /* Firefox */
      -ms-appearance: checkbox;     /* not currently supported */
    }
    <label><input type="radio" name="radio"> Checkbox 1</label>
    <label><input type="radio" name="radio"> Checkbox 2</label>
    jsfiddle公司: http://jsfiddle.net/mq8Zq/

    注: 由于缺乏供应商的支持和一致性,这最终从CSS3规范中删除。我建议不要实现它,除非您只需要支持基于Webkit或Gecko的浏览器。

        2
  •  25
  •   Kornel    16 年前

    input[type=radio] {content:url(mycheckbox.png)}
    input[type=radio]:checked {content:url(mycheckbox-checked.png)}
    

    实际上:

    <span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>
    
    @media screen {.fakecheckbox img {display:none}}
    @media print {.fakecheckbox input {display:none;}}
    

    你需要Javascript来保存 <img>

    我用过 <img> ,因为浏览器通常配置为不打印 background-image . 使用图像比使用其他控件要好,因为图像是非交互的,并且不太可能导致问题。

        3
  •  24
  •   web2tips Beej    9 年前

    这是我只使用CSS(Jsfiddle: http://jsfiddle.net/xykPT/ ).

    enter image description here

    div.options > label > input {
    	visibility: hidden;
    }
    
    div.options > label {
    	display: block;
    	margin: 0 0 0 -10px;
    	padding: 0 0 20px 0;  
    	height: 20px;
    	width: 150px;
    }
    
    div.options > label > img {
    	display: inline-block;
    	padding: 0px;
    	height:30px;
    	width:30px;
    	background: none;
    }
    
    div.options > label > input:checked +img {  
    	background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
    	background-repeat: no-repeat;
    	background-position:center center;
    	background-size:30px 30px;
    }
    <div class="options">
    	<label title="item1">
    		<input type="radio" name="foo" value="0" /> 
    		Item 1
    		<img />
    	</label>
    	<label title="item2">
    		<input type="radio" name="foo" value="1" />
    		Item 2
    		<img />
    	</label>   
    	<label title="item3">
    		<input type="radio" name="foo" value="2" />
    		Item 3
    		<img />
    	</label>
    </div>
        4
  •  6
  •   web2tips Beej    9 年前

    我修改了用户2314737的答案 font awesome

    jsFiddle

    结果

    enter image description here

    div.checkRadioContainer > label > input {
    	visibility: hidden;
    }
    
    div.checkRadioContainer {
    	max-width: 10em;
    }
    div.checkRadioContainer > label {
    	display: block;
    	border: 2px solid grey;
    	margin-bottom: -2px;
    	cursor: pointer;
    }
    
    div.checkRadioContainer > label:hover {
    	background-color: AliceBlue;
    }
    
    div.checkRadioContainer > label > span {
    	display: inline-block;
    	vertical-align: top;
    	line-height: 2em;
    }
    
    div.checkRadioContainer > label > input + i {
    	visibility: hidden;
    	color: green;
    	margin-left: -0.5em;
    	margin-right: 0.2em;
    }
    
    div.checkRadioContainer > label > input:checked + i {
    	visibility: visible;
    }
    <div class="checkRadioContainer">
    	<label>
    		<input type="radio" name="radioGroup" />
    		<i class="fa fa-check fa-2x"></i>
    		<span>Item 1</span>
    	</label>
    	<label>
    		<input type="radio" name="radioGroup" />
    		<i class="fa fa-check fa-2x"></i>
    		<span>Item 2</span>
    	</label>
    	<label>
    		<input type="radio" name="radioGroup" />
    		<i class="fa fa-check fa-2x"></i>
    		<span>Item 3</span>
    	</label>
    </div>
        5
  •  1
  •   Md Rafee    9 年前

    外观 属性不能在所有浏览器中工作。你可以这样做-

    input[type="radio"]{
      display: none;
    }
    label:before{
      content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);
    }
    input[type="radio"]:checked+label:before{
      content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);
    }
     
      <input type="radio" name="gender" id="test1" value="male">
      <label for="test1"> check 1</label>
      <input type="radio" name="gender" value="female" id="test2">
      <label for="test2"> check 2</label>
      <input type="radio" name="gender" value="other" id="test3">
      <label for="test3"> check 3</label>  

    它适用于IE8+和其他浏览器

        6
  •  0
  •   Diodeus - James MacFarlane    16 年前

    我认为除了使用CSS的控件之外,您无法使控件看起来像任何其他控件。

    最好的办法是将打印按钮转到一个新页面,并用一个图形代替选定的单选按钮,然后在其中执行window.PRINT()操作。

        7
  •  0
  •   geek-merlin    9 年前

    是的,CSS可以做到:

    input[type=checkbox] {
      display: none;
    }
    input[type=checkbox] + *:before {
      content: "";
      display: inline-block;
      margin: 0 0.4em;
      /* Make some horizontal space. */
      width: .6em;
      height: .6em;
      border-radius: 0.6em;
      box-shadow: 0px 0px 0px .5px #888
      /* An outer circle. */
      ;
      /* No inner circle. */
      background-color: #ddd;
      /* Inner color. */
    }
    input[type=checkbox]:checked + *:before {
      box-shadow: 0px 0px 0px .5px #888
      /* An outer circle. */
      , inset 0px 0px 0px .14em #ddd;
      /* An inner circle with above inner color.*/
      background-color: #444;
      /* The dot color */
    }
    <div>
      <input id="check1" type="checkbox" name="check" value="check1" checked>
      <label for="check1">Fake Checkbox1</label>
    </div>
    <div>
      <input id="check2" type="checkbox" name="check" value="check2">
      <label for="check2">Fake Checkbox2</label>
    </div>
    <div>
      <input id="check2" type="radio" name="check" value="radio1" checked>
      <label for="check2">Real Checkbox1</label>
    </div>
    <div>
      <input id="check2" type="radio" name="check" value="radio2">
      <label for="check2">Real Checkbox2</label>
    </div>
        8
  •  -1
  •   Vincen77o    13 年前

    我是不是太简单了?

    <style type="text/css" media="screen">
    #ageBox {display: none;}
    </style>
    
    <style type="text/css" media="print">
    #ageButton {display: none;}
    </style>
    
    <tr><td>Age:</td>
    
    <td id="ageButton">
    <input type="radio" name="userAge" value="18-24">18-24
    <input type="radio" name="userAge" value="25-34">25-34
    
    <td id="ageBox">
    <input type="checkbox">18-24
    <input type="checkbox">25-34
    
    </td></tr>