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



  • 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


  • Onsen UI

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



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



  • Could you please respond?

    Thank you!



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

    0_1519146495805_image.png



  • @jamal That is perfect. Thanks, Jamal.


Log in to reply