diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 559b0e40e35..e2115440717 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -2312,25 +2312,10 @@
 .openerp .oe_form_field_radio.oe_horizontal {
   white-space: nowrap;
 }
-.openerp .oe_form_field_radio.oe_horizontal .oe_radio_header {
+.openerp .oe_form_field_radio.oe_horizontal label {
   display: inline-block;
   text-align: center;
 }
-.openerp .oe_form_field_radio.oe_vertical .oe_radio_header {
-  cursor: pointer;
-}
-.openerp .oe_form_field_radio .oe_radio_input {
-  cursor: pointer;
-  display: inline-block;
-  width: 20px;
-  background: transparent url(/web/static/src/img/icons/input_radio-off.png) no-repeat center center;
-}
-.openerp .oe_form_field_radio .oe_radio_input_on {
-  background: transparent url(/web/static/src/img/icons/input_radio-on.png) no-repeat center center;
-}
-.openerp .oe_form_field_radio .oe_radio_label {
-  cursor: default;
-}
 .openerp .oe_form_field_progressbar.ui-progressbar {
   height: 22px;
   font-size: 10px;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index d687ce21869..c92e7fd3c55 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -483,21 +483,9 @@ $sheet-padding: 16px
     .oe_form_field_radio
         &.oe_horizontal
             white-space: nowrap
-            .oe_radio_header
+            label
                 display: inline-block
                 text-align: center
-        &.oe_vertical
-            .oe_radio_header
-                cursor: pointer
-        .oe_radio_input {
-            cursor: pointer
-            display: inline-block
-            width: 20px
-            background: transparent url(/web/static/src/img/icons/input_radio-off.png) no-repeat center center
-        .oe_radio_input_on
-            background: transparent url(/web/static/src/img/icons/input_radio-on.png) no-repeat center center
-        .oe_radio_label
-            cursor: default
     .oe_tags
         &.oe_inline
             min-width: 250px
diff --git a/addons/web/static/src/img/icons/input_radio-off.png b/addons/web/static/src/img/icons/input_radio-off.png
deleted file mode 100644
index 790f7ed13b2..00000000000
Binary files a/addons/web/static/src/img/icons/input_radio-off.png and /dev/null differ
diff --git a/addons/web/static/src/img/icons/input_radio-on.png b/addons/web/static/src/img/icons/input_radio-on.png
deleted file mode 100644
index d55c291e795..00000000000
Binary files a/addons/web/static/src/img/icons/input_radio-on.png and /dev/null differ
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 600f5657503..e1c5208358c 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -2806,6 +2806,9 @@ instance.web.form.FieldSelection = instance.web.form.AbstractField.extend(instan
 
 instance.web.form.FieldRadio = instance.web.form.AbstractField.extend(instance.web.form.ReinitializeFieldMixin, {
     template: 'FieldRadio',
+    events: {
+        'click input': 'click_change_value'
+    },
     init: function(field_manager, node) {
         /* Radio button widget: Attributes options:
         * - "horizontal" to display in column
@@ -2820,20 +2823,18 @@ instance.web.form.FieldRadio = instance.web.form.AbstractField.extend(instance.w
         this.domain = false;
     },
     initialize_content: function () {
-        this.$el.on('click', '.oe_radio_input,.oe_radio_header', this, this.on_click_change_value);
+        this.uniqueId = _.uniqueId("radio");
         this.on("change:effective_readonly", this, this.render_value);
         this.field_manager.on("view_content_has_changed", this, this.get_selection);
         this.get_selection();
     },
-    on_click_change_value: function (event) {
-        var id = $(event.target).data("id") || $(event.target).parent().data("id");
-        id = isNaN(+id) ? id : +id;
-        if (id && !this.get("effective_readonly")) {
-            if (!this.field.required && id == this.get_value()) {
-                this.set_value(false);
-            } else {
-                this.set_value(id);
-            }
+    click_change_value: function (event) {
+        var val = $(event.target).val();
+        val = isNaN(+val) ? val : +val;
+        if (val == this.get_value()) {
+            this.set_value(false);
+        } else {
+            this.set_value(val);
         }
     },
     /** Get the selection and render it
@@ -2887,9 +2888,11 @@ instance.web.form.FieldRadio = instance.web.form.AbstractField.extend(instance.w
     render_value: function () {
         this.$(".oe_radio_edit_only, .oe_radio_read_only").hide();
         this.$(this.get('effective_readonly') ? ".oe_radio_read_only" : ".oe_radio_edit_only").show();
-        this.$(".oe_radio_input_on").removeClass("oe_radio_input_on");
-        this.$(".oe_radio_input[data-id='" + this.get_value() + "'], [data-id='" + this.get_value() + "'] .oe_radio_input").addClass("oe_radio_input_on");
-        this.$(".oe_radio_read_only .oe_radio_header").text(this.get('value') ? this.get('value')[1] : "");
+        this.$("input[checked]").prop("checked", false);
+        if (this.get_value()) {
+            this.$("input[value='" + this.get_value() + "']").attr("checked", true);
+            this.$(".oe_radio_read_only .oe_radio_header").text(this.get('value') ? this.get('value')[1] : "");
+        }
     }
 });
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index e89865e42e1..df289bbb2ea 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1118,23 +1118,23 @@
                 <t t-set="width" t-value="Math.floor(100 / widget.selection.length)"/>
                 <t t-if="!widget.no_radiolabel">
                     <t t-foreach="widget.selection" t-as="selection">
-                        <div class="oe_radio_header" t-att-style="'width: ' + width + '%;'"><t t-esc="selection[1]"/></div>
+                        <label t-att-for="widget.uniqueId + '_' + selection[0]" t-att-style="'width: ' + width + '%;'"><t t-esc="selection[1]"/></label>
                     </t>
                     <br/>
                 </t>
                 <t t-foreach="widget.selection" t-as="selection">
-                    <div class="oe_radio_input" t-att-style="'width: ' + width + '%;'" t-att-data-id="selection[0]">&amp;nbsp;</div>
+                    <input type="radio" t-att-name="widget.uniqueId" t-att-id="widget.uniqueId + '_' + selection[0]" t-att-style="'width: ' + width + '%;'" t-att-value="selection[0]"/>
                 </t>
             </t>
             <t t-if="!widget.horizontal">
                 <t t-foreach="widget.selection" t-as="selection">
-                    <div class="oe_radio_header" t-att-data-id="selection[0]">
-                        <div class="oe_radio_input">&amp;nbsp;</div><t t-if="!widget.no_radiolabel" t-esc="selection[1]"/>
+                    <div t-att-data-id="selection[0]">
+                        <input type="radio" t-att-id="widget.uniqueId + '_' + selection[0]" t-att-name="widget.uniqueId" t-att-value="selection[0]"/>&amp;nbsp;<label t-if="!widget.no_radiolabel" t-att-for="widget.uniqueId + '_' + selection[0]"><t t-esc="selection[1]"/></label>
                     </div>
                 </t>
             </t>
         </span>
-        <span class="oe_radio_read_only"><div class="oe_radio_header"><t t-esc="widget.get('value')[1]"/></div></span>
+        <span class="oe_radio_read_only"><t t-esc="widget.get('value')[1]"/></span>
     </span>
 </t>
 <t t-name="FieldMany2One">