diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss index 2d867d5eb742..b1e1f310220c 100644 --- a/src/lib/radio/radio.scss +++ b/src/lib/radio/radio.scss @@ -1,5 +1,6 @@ @import '../core/style/variables'; @import '../core/ripple/ripple'; +@import '../core/style/vendor-prefixes'; @import '../../cdk/a11y/a11y'; @@ -16,6 +17,10 @@ $mat-radio-ripple-radius: 20px; // Inner label container, wrapping entire element. // Enables focus by click. .mat-radio-label { + // Disable text selection on the label itself, because having text selected + // will prevent focus from reaching the label. Below we'll re-enable it only + // for the label's content so that people can still select the text. + @include user-select(none); cursor: pointer; display: inline-flex; align-items: center; @@ -87,6 +92,9 @@ $mat-radio-ripple-radius: 20px; // Text label next to radio. .mat-radio-label-content { + // Re-enable text selection for the button's content since + // we disabled it above in the `.mat-radio-label`. + @include user-select(auto); display: inline-block; order: 0; line-height: inherit;