HI WELCOME TO KANSIRIS

Use div as radio-button

Leave a Comment
you can use 'div' as radio button and will work as radio button groups. But for this you'll need Javascript. I've created a script for that using JQuery. Here is the source--
$('.radio-group .radio').click(function(){
    $(this).parent().find('.radio').removeClass('selected');
    $(this).addClass('selected');
    var val = $(this).attr('data-value');
    //alert(val);
    $(this).parent().find('input').val(val);
});
.radio-group{
    position: relative;
}

.radio{
    display:inline-block;
    width:15px;
    height: 15px;
    border-radius: 100%;
    background-color:lightblue;
    border: 2px solid lightblue;
    cursor:pointer;
    margin: 2px 0; 
}

.radio.selected{
    border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Select an option (You will get it's value displayed in the text input field!)</h2>
<form method="post" action="send.php">
  <div class="radio-group">
      <div class='radio' data-value="One"></div>1
      <div class='radio' data-value="Two"></div>2
      <div class='radio' data-value="Three"></div>3
      <br/>
      <input type="text" id="radio-value" name="radio-value" />
  </div>
  
</form>

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.