diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss
index 10d285b..9354059 100644
--- a/src/scss/cdb-components/forms/checkbox.scss
+++ b/src/scss/cdb-components/forms/checkbox.scss
@@ -7,15 +7,15 @@
 ```
 <div class="u-iBlock">
   <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
-  <span class="u-iBlock CDB-CheckboxFace"></span>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
 </div>
 <div class="u-iBlock">
   <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
-  <span class="u-iBlock CDB-CheckboxFace"></span>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
 </div>
 <div class="u-iBlock">
   <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
-  <span class="u-iBlock CDB-CheckboxFace"></span>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
 </div>
 ```
 */
@@ -30,78 +30,71 @@
   position: absolute;
   vertical-align: middle;
   z-index: 1;
+}
 
-  ~ .CDB-CheckboxFace {
-    position: relative;
-    width: $baseSize * 2;
-    height: $baseSize * 2;
-    border: 1px solid $cMainLine;
-    border-radius: 3px;
-    background: $cWhite;
-    cursor: pointer;
-    box-sizing: border-box;
+.CDB-Checkbox-face {
+  position: relative;
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  border: 1px solid $cMainLine;
+  border-radius: 3px;
+  background: $cWhite;
+  cursor: pointer;
+  box-sizing: border-box;
 
-    &::before,
-    &::after {
-      display: block;
-      position: absolute;
-      bottom: 3px;
-      width: 2px;
-      border-radius: 1px;
-      background: $cSecondaryLine;
-      content: '';
-    }
-
-    &::before {
-      right: $baseSize / 2;
-      height: $baseSize;
-      transform: rotate(45deg);
-    }
-
-    &::after {
-      left: $baseSize / 2;
-      height: $baseSize - 2;
-      transform: rotate(-45deg);
-    }
+  &::before,
+  &::after {
+    display: block;
+    position: absolute;
+    bottom: 3px;
+    width: 2px;
+    border-radius: 1px;
+    background: $cSecondaryLine;
+    content: '';
   }
 
-  &:checked {
-    ~ .CDB-CheckboxFace {
-      border: 1px solid $cBlue;
-      background: $cBlue;
-    }
-
-    ~ .CDB-CheckboxFace::before,
-    ~ .CDB-CheckboxFace::after {
-      background: $cWhite;
-    }
-
-    &:hover ~ .CDB-CheckboxFace {
-      border: 1px solid $cBlue;
-    }
+  &::before {
+    right: $baseSize / 2;
+    height: $baseSize;
+    transform: rotate(45deg);
   }
 
-  &:focus ~ .CDB-CheckboxFace {
-    border: 1px solid $cBlue;
-  }
-
-  &:hover ~ .CDB-CheckboxFace {
-    border: 1px solid $cHoverLine;
-  }
-
-  &:disabled {
-    ~ .CDB-CheckboxFace {
-      border: 1px solid $cSecondaryLine;
-      background: $cThirdBackground;
-    }
-
-    ~ .CDB-CheckboxFace::before,
-    ~ .CDB-CheckboxFace::after {
-      background: $cWhite;
-    }
-
-    &:hover ~ .CDB-CheckboxFace {
-      border: 1px solid $cSecondaryLine;
-    }
+  &::after {
+    left: $baseSize / 2;
+    height: $baseSize - 2;
+    transform: rotate(-45deg);
   }
 }
+
+.CDB-Checkbox:checked + .CDB-Checkbox-face {
+  border: 1px solid $cBlue;
+  background: $cBlue;
+
+  &::before,
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.CDB-Checkbox:disabled + .CDB-Checkbox-face {
+  border: 1px solid $cSecondaryLine;
+  background: $cThirdBackground;
+
+  &::before,
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.CDB-Checkbox:disabled:hover ~ .CDB-Checkbox-face {
+  border: 1px solid $cSecondaryLine;
+}
+
+.CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
+.CDB-Checkbox:focus + .CDB-Checkbox-face {
+  border: 1px solid $cBlue;
+}
+
+.CDB-Checkbox:hover + .CDB-Checkbox-face {
+  border: 1px solid $cHoverLine;
+}
\ No newline at end of file
diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss
index 77075d8..d9c7317 100644
--- a/src/scss/cdb-components/forms/legends.scss
+++ b/src/scss/cdb-components/forms/legends.scss
@@ -7,12 +7,12 @@
 ```
 <div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
   <input class="CDB-Radio" type="radio" name="veritas" value="01">
-  <span class="u-iBlock CDB-RadioFace"></span>
+  <span class="u-iBlock CDB-Radio-face"></span>
   <label class="u-iBlock u-lSpace">True</label>
 </div>
 <div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
   <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
-  <span class="u-iBlock CDB-RadioFace"></span>
+  <span class="u-iBlock CDB-Radio-face"></span>
   <label class="u-iBlock u-lSpace">False</label>
 </div>
 
@@ -22,12 +22,12 @@
 
 <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
   <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
-  <span class="u-iBlock CDB-CheckboxFace"></span>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
   <label class="u-iBlock u-lSpace">Sport</label>
 </div>
 <label class="u-iblock CDB-Text CDB-Size-medium">
   <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
-  <span class="u-iBlock CDB-CheckboxFace"></span>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
   <label class="u-iBlock u-lSpace">Travel</label>
 </label>
 
@@ -41,14 +41,14 @@
     <li class="u-iBlock u-rSpace--xl">
       <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
         <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
-        <span class="u-iBlock CDB-CheckboxFace"></span>
+        <span class="u-iBlock CDB-Checkbox-face"></span>
         <label class="u-iBlock u-lSpace">Sport</label>
       </div>
     </li>
     <li class="u-iblock">
       <label class="u-iblock CDB-Text CDB-Size-medium">
         <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
-        <span class="u-iBlock CDB-CheckboxFace"></span>
+        <span class="u-iBlock CDB-Checkbox-face"></span>
         <label class="u-iBlock u-lSpace">Travel</label>
       </label>
     </li>
diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss
index 5473b53..1f369f4 100644
--- a/src/scss/cdb-components/forms/radio.scss
+++ b/src/scss/cdb-components/forms/radio.scss
@@ -8,15 +8,15 @@
 ```
 <div class="u-iBlock">
   <input class="CDB-Radio" type="radio" name="gender" value="01" checked>
-  <span class="u-iBlock CDB-RadioFace"></span>
+  <span class="u-iBlock CDB-Radio-face"></span>
 </div>
 <div class="u-iBlock">
   <input class="CDB-Radio" type="radio" name="gender" value="02">
-  <span class="u-iBlock CDB-RadioFace"></span>
+  <span class="u-iBlock CDB-Radio-face"></span>
 </div>
 <div class="u-iBlock">
   <input class="CDB-Radio" type="radio" name="gender" value="03" disabled>
-  <span class="u-iBlock CDB-RadioFace"></span>
+  <span class="u-iBlock CDB-Radio-face"></span>
 </div>
 ```
 */
@@ -31,67 +31,60 @@
   position: absolute;
   vertical-align: middle;
   z-index: 1;
+}
 
-  ~ .CDB-RadioFace {
-    position: relative;
-    width: $baseSize * 2;
-    height: $baseSize * 2;
-    border: 1px solid $cMainLine;
+.CDB-Radio-face {
+  position: relative;
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  border: 1px solid $cMainLine;
+  border-radius: 50%;
+  background: $cWhite;
+  text-indent: 20px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $baseSize - 2;
+    height: $baseSize - 2;
+    margin-top: -3px;
+    margin-left: -3px;
     border-radius: 50%;
-    background: $cWhite;
-    text-indent: 20px;
-    cursor: pointer;
-    box-sizing: border-box;
-
-    &::before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: $baseSize - 2;
-      height: $baseSize - 2;
-      margin-top: -3px;
-      margin-left: -3px;
-      border-radius: 50%;
-      background: $cSecondaryLine;
-      content: '';
-    }
-  }
-
-  &:checked {
-    ~ .CDB-RadioFace {
-      border: 1px solid $cBlue;
-      background: $cBlue;
-    }
-
-    ~ .CDB-RadioFace::before {
-      background: $cWhite;
-    }
-
-    &:hover ~ .CDB-RadioFace {
-      border: 1px solid $cBlue;
-    }
-  }
-
-  &:focus ~ .CDB-RadioFace {
-    border: 1px solid $cBlue;
-  }
-
-  &:hover ~ .CDB-RadioFace {
-    border: 1px solid $cHoverLine;
-  }
-
-  &:disabled {
-    ~ .CDB-RadioFace {
-      border: 1px solid $cSecondaryLine;
-      background: $cThirdBackground;
-    }
-
-    ~ .CDB-RadioFace::before {
-      background: $cWhite;
-    }
-
-    &:hover ~ .CDB-RadioFace {
-      border: 1px solid $cSecondaryLine;
-    }
+    background: $cSecondaryLine;
+    content: '';
   }
 }
+
+.CDB-Radio:checked + .CDB-Radio-face {
+  border: 1px solid $cBlue;
+  background: $cBlue;
+
+  &::before {
+    background: $cWhite;
+  }
+}
+
+.CDB-Radio:disabled + .CDB-Radio-face {
+  border: 1px solid $cSecondaryLine;
+  background: $cThirdBackground;
+
+  &::before {
+    background: $cWhite;
+  }
+}
+
+.CDB-Radio:disabled:hover + .CDB-Radio-face {
+  border: 1px solid $cSecondaryLine;
+}
+
+.CDB-Radio:hover + .CDB-Radio-face {
+  border: 1px solid $cHoverLine;
+}
+
+.CDB-Radio:focus + .CDB-Radio-face,
+.CDB-Radio:checked:hover + .CDB-Radio-face {
+  border: 1px solid $cBlue;
+}
\ No newline at end of file