How to Make Mac Style Radio Buttons With CSS

Certain Apple products, including the Mac OS and iOS operating systems, have distinct rounded radio buttons. By using CSS code and some HTML, you can recreate these rounded Mac-style buttons on a Web page, giving your site an Apple feel. You can learn how to create Mac radio buttons with CSS in a few steps.

Instructions

1. Open your website's CSS file in the Windows Notepad application that comes bundled with the operating system.

2. Copy and paste the following code into your CSS file:

   .yui3-macprefradio {
   height: 1.75em;
   }

   .yui3-macprefradio .yui3-macprefradio-button {
   border: 1px solid #999;
   float: left;
   padding: 0.1em 0.5em;
   -webkit-border-radius: 6px; /* web-kit browsers */
   -khtml-border-radius: 6px; /* konquerer, works in safari too */
   -moz-border-radius: 6px; /* gecko browsers */
   -o-border-radius: 6px; /* possibly for opera */
   border-radius: 6px;
   text-align: center;
   width: 50px;
   }

   .yui3-macprefradio .checked {
   background-color: #DAF4DC;
   border-color: #7DC67D;
   }

   .yui3-macprefradio .yui3-macprefradio-center {
   border-left: none;
   -webkit-border-radius: 0;
   -khtml-border-radius: 0;
   -moz-border-radius: 0;
   -o-border-radius: 0;
   border-radius: 0;
   }

   .yui3-macprefradio .yui3-macprefradio-left {
   -webkit-border-bottom-right-radius: 0;
   -webkit-border-top-right-radius: 0;
   -khtml-border-bottom-right-radius: 0;
   -khtml-border-bottom-right-radius: 0;
   -moz-border-radius-topright: 0;
   -moz-border-radius-bottomright: 0;
   -o-border-bottom-right-radius: 0;
   -o-border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
   }

   .yui3-macprefradio .yui3-macprefradio-right {
   border-left: none;
   -webkit-border-bottom-left-radius: 0;
   -webkit-border-top-left-radius: 0;
   -khtml-border-bottom-left-radius: 0;
   -khtml-border-bottom-left-radius: 0;
   -moz-border-radius-topleft: 0;
   -moz-border-radius-bottomleft: 0;
   -o-border-bottom-left-radius: 0;
   -o-border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   }

3. Save your CSS file, and then close it.

4. Open your Web page's HTML file in Notepad.

5. Copy and paste the following block of code into your HTML file at the position you'd like an ON/OFF Mac-style radio button:

   <div class="yui3-macprefradio" id="renderFromExactMarkup">
   <div class="yui3-macprefradio-button yui3-macprefradio-left" title="yes">On</div>
   <div class="yui3-macprefradio-button yui3-macprefradio-right checked" title="no">Off</div>
   <input name="radio1" type="hidden" value=""/>
   </div>

6. Click "File," and then "Save." You've successfully created Mac-style radio buttons using CSS.