<ons-radio> does not show the round border. Simply show tick mark if checked

mmike

Hello,

<ons-radio> does not show the round border around it.
Simply show tick mark if checked. Is it possible to show the border, please?

Even text box does not show the border. It simply shows the underline.
Is it possible to show the border, please?

Thanks

Fran Diox

@mmike There is no preset modifier for that. You can simply modify the CSS or create your own modifier as explained in the docs. Something like this could work:

  .radio-button--border {
    border: 1px solid #ccc;
    border-radius: 50px;
  }
  .radio-button--border__checkmark:after {
    left: 6px;
  }

And then add modifier="border" attribute to your radio buttons.

mmike

@Fran-Diox said:

.radio-button–border {
border: 1px solid #ccc;
border-radius: 50px;
}
.radio-button–border__checkmark:after {
left: 6px;
}

Thanks Fran.

The circle is too big compared with ons-checkbox?

Can we make it little smaller?

I tried changed the border-radius to 25px. No effect though!

Thanks

mmike

Could you please respond?

Thank you!

jamal

@mmike,

Check the following Codepin: https://codepen.io/jamalassaf/pen/wymYzo

box-sizing: border-box; is required.

.radio-button--border {        
    box-sizing:border-box;
    width:22px;
    height:22px;
    border:1px solid #c7c7cd;
    border-radius:22px;
    left:0;
    
  }

<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">

	<meta http-equiv="Content-Security-Policy" content="style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval';">

	<script src="components/loader.js"></script>

	<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
	<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

	<script src="https://unpkg.com/onsenui/js/onsenui.js"></script> 
		
</head>

<ons-page>
  <ons-list>
    <ons-list-item tappable>
      <label class="left">
        <ons-radio name="color" input-id="radio-1" checked modifier="border"></ons-radio>
      </label>
      <label for="radio-1" class="center">
        radio button styled
      </label>
    </ons-list-item>
    <ons-list-item tappable>
      <label class="left">
        <ons-radio name="color" input-id="radio-2"></ons-radio>
      </label>
      <label for="radio-2" class="center">
        radio button not styled
      </label>
      
      
    </ons-list-item>
    <ons-list-item tappable>
      <label class="left">
        <ons-checkbox name="color" input-id="checkbox -2"></ons-checkbox>
      </label>
      <label for="radio-2" class="center">
        checkbox 
      </label>
  </ons-list>
  
  
</ons-page>

mmike

@jamal That is perfect. Thanks, Jamal.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

<ons-radio> does not show the round border. Simply show tick mark if checked