It has long been established that not every detail on browser-generated controls can be changed. For instance, the color of the arrow on a select dropdown or the dot of a radio button cannot be altered.

You have various options available such as creating custom controls, utilizing libraries like JQuery UI, or experimenting with CSS to achieve the desired result.

One interesting experiment involves faking a colored dot on a radio button using the :before pseudo-element:

http://jsfiddle.net/bvtngh57/

input[type="radio"]:checked:before {
    content: "";
    display: block;
    position: relative;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: red;
}

Result:

An effective way to style checkboxes and radio buttons using CSS is by replacing them with custom images that visually indicate their current state, like checked or unchecked.

To learn more about this technique, check out Ryan Seddon's informative article at:

In terms of aesthetics, radio buttons and checkboxes on a webpage are typically handled by the browser itself. However, it is possible to hide the default appearance of radio buttons, replace them with custom images, and then manipulate their values using jQuery. Font Awesome offers a variety of stylish icons that can be used for this purpose ().

For a demonstration, you can view this demo.

<div>
    Radio 1 - 
    <input type="radio" name="radio" class="radio" value="1" />
    <span class="red fa fa-circle-o"></span>
</div>
<div>
    Radio 2 - 
    <input type="radio" name="radio" class="radio" value="2" />
    <span class="blue fa fa-circle-o"></span>
</div>

$('span.fa').on('click', function() {
    $('span.fa').removeClass('fa fa-dot-circle-o').addClass('fa fa-circle-o');
    $(this).removeClass('fa-circle-o').addClass('fa-dot-circle-o');

    //Check corresponding hidden radio
    $(this).prev('input.radio').prop('checked', true);
});

There are multiple approaches to achieve this goal, all of which require removing the DOM styles as it is not feasible to accomplish without utilizing these methods. One example can be found in a tutorial by Chris Coyier, where you can skip step 1 and focus on preparing the images and CSS.

/*
    Conceal the original radio buttons and checkboxes
    (while still maintaining accessibility)

    :not(#bar) > serves as a rule filter to prevent certain browsers
                 from applying unnecessary rules

*/
li:not(#bar) > fieldset > div > span > input[type='radio'],
li:not(#bar) > fieldset > div > span > input[type='checkbox'] {

    /* Hide the input, yet retain clickability */
    opacity: 0;

    float: left;
    width: 18px;
}

li:not(#bar) > fieldset > div > span > input[type='radio'] + label,
li:not(#bar) > fieldset > div > span > input[type='checkbox'] + label {
    margin: 0;
    clear: none;

    /* Padding on the left creates space for image */
    padding: 5px 0 4px 24px;

    /* Cursor change indicates clickability */
    cursor: pointer;

    background: url(off.png) left center no-repeat;
}

/*
    Transition from unchecked to checked graphics
*/
li:not(#bar) > fieldset > div > span > input[type='radio']:checked + label {
    background-image: url(radio.png);
}
li:not(#bar) > fieldset > div > span > input[type='checkbox']:checked + label {
    background-image: url(check.png);
}

To customize ionic radio buttons, you can utilize CSS styling exclusively. Take a look at this fiddle:

https://jsfiddle.net/sreekanthjayan/0d9vj86k/

     <div>
          <ion-radio class="radio radio-inline radio-gray" ng-model="choice" ng-value="'A'">iOS</ion-radio>
          <ion-radio class="radio radio-inline radio-teal" ng-model="choice" ng-value="'B'">Android</ion-radio>
          <ion-radio class="radio radio-inline radio-blue" ng-model="choice" ng-value="'C'">Windows Phone</ion-radio>
     </div>


.radio .radio-icon {
  visibility: visible !important;
}

.radio .radio-icon:before {
  content: "" !important;
  border: 2px solid black !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.radio .radio-icon:after {
  content: "" !important;
  position: absolute !important;
  right: 20px !important;
  top: 22px !important;
  background: black !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  transition: -webkit-transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650);
  transition: transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650);
  -webkit-transform: scale(0);
  transform: scale(0);
}

.radio.item-radio > input[type=radio]:checked ~ .radio-icon:after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.radio .item-content {
  background-color: #fff;
  margin: 0;
  padding-right: 50px;
  padding-left: 0px;
}

.radio.item-radio > input[type=radio]:checked ~ .item-content {
  background-color: #fff;
}

.radio-inline.item {
  display: inline-block;
  border: none;
  margin: 0;
  height: 50px;
}

.radio-blue .radio-icon:after {
  background: #2196F3 !important;
}

.radio-blue .radio-icon:before {
  border-color: #2196F3 !important;
}

.radio-teal .radio-icon:after {
  background: #009688 !important;
}

.radio-teal .radio-icon:before {
  border-color: #009688 !important;
}

.radio-gray .radio-icon:after {
  background: #B6B6B6 !important;
}

.radio-gray .radio-icon:before {
  border-color: #B6B6B6 !important;
}