Change radio button style

Change radio button style

Hi ,

I would like to make the radio button check boxes on this page of my site larger and if possible with lime green colored check marks. I think it would look more attractive for the type of site I'm trying to create. I have no idea where to start with this. I would really appreciate some help please.


The page: http://10meijin.com/babynames


  1. @extends('layouts.bg')

    @section('content')
    <div id="middle" class="full_width">
        <div class="container clearfix">
            <div id="mid_bird"></div>
            <div id="mid_baloon"></div>
            <div class="content_wrapper" align="middle">
                    <div class="title_top" align="left"><h1>Names for Babies</h1>
                </div>
    <p><div class="title_top" align="left"><span class="text_style1">Please choose up to three different icons. You will receive three uniquely chosen English names according to the personality icons you choose. It's that easy!</span></p></div>

                <form class="form-horizontal" class="ajax_form contactForm"  role="form" method="POST" action="{{ url('/babynames') }}">
                    {{ csrf_field() }}
                    <div class='aligncenter '>
                        <input type="radio" class='inputtext input_middle' name="gender" value="male" checked="yes"><strong style="font-size:24px;color:#673509;font-family: 'Nunito', sans-serif;">male</strong>
                        <input type="radio" class='inputtext input_middle'  name="gender" value="female" ><strong style="font-size:24px;color:#673509;font-family: 'Nunito', sans-serif;">female</strong>
                    </div>
                    <div class="clear"></div>
                    <div class="clear"></div>
                    <div class="content" style="margin-top:50px;">
                        <div class="clear"></div>
                        <div class="clearfix staff_list postajax">
                            @if (count($chalist) > 0)
                            @foreach ($chalist as $c)
                            <div class="staff_item" style="height:250px" >
                                <div ><img src="/upload/{{ $c->id }}cha.jpg" alt=""></div>
                                <p><input type="checkbox" class='inputtext input_middle' name="character" value="{{$c->cat}}" ><p>
                            </div>
                            @endforeach
                            @endif
                        </div> 
                        <div  align="middle">
                            <div class="clear"></div>
                            <div class="row rowSubmit clearfix aligncenter">
                                <input type="button" id="send_form"  data-toggle="modal" data-target="#myModal1" name="button" title="Submit mesage" value="Find Your English Name" />
                            </div>
                            <div class="bootstrap-iso">
                            <!-- Modal -->
                            <div id="myModal1" class="modal fade" role="dialog">
                                <div class="modal-dialog">

                                    <!-- Modal content-->
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            <h4 class="modal-title">Modal Header</h4>
                                        </div>
                                        <div class="modal-body">
                                            <label  class="control-label" id="label_detail"></label>
                                             <div class="left" id="modal-content"></div>
                                            
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </form>