From 13f975821ddbe5b436ab1f3c52318dd7ae6e8b4a Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Sat, 11 Mar 2023 08:42:17 +0300
Subject: [PATCH] Add files via upload
---
.../18-customize-radio-input/index.html | 26 ++++++++
.../18-customize-radio-input/style.css | 64 +++++++++++++++++++
2 files changed, 90 insertions(+)
create mode 100644 100_projects/18-customize-radio-input/index.html
create mode 100644 100_projects/18-customize-radio-input/style.css
diff --git a/100_projects/18-customize-radio-input/index.html b/100_projects/18-customize-radio-input/index.html
new file mode 100644
index 0000000..5565799
--- /dev/null
+++ b/100_projects/18-customize-radio-input/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+ Customize Radio Input
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/18-customize-radio-input/style.css b/100_projects/18-customize-radio-input/style.css
new file mode 100644
index 0000000..16e5cff
--- /dev/null
+++ b/100_projects/18-customize-radio-input/style.css
@@ -0,0 +1,64 @@
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: #B6D6C8;
+ color: #2C2D2A;
+}
+form {
+ width: 350px;
+ margin: 20px auto;
+ background-color: #f9f9f9;
+ padding: 25px 30px;
+ border-radius: 5px;
+ font-size: 21px;
+}
+form > div {
+ padding: 5px 0;
+}
+form input[type="radio"] {
+ -webkit-appearance: none;
+ appearance: none;
+}
+form label {
+ position: relative;
+ padding-left: 25px;
+}
+form label::before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ border: 1px solid #2C2D2A;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ background: white;
+ border-radius: 50%;
+}
+form input[type="radio"]:checked + label::after,
+form input[type="radio"]:not(:checked):hover + label::after {
+ content: "";
+ background-color: #2C2D2A;
+ width: 10px;
+ height: 10px;
+ position: absolute;
+ left: 4px;
+ top: 7px;
+ border-radius: 5px;
+}
+form input[type="radio"]:not(:checked):hover + label::after {
+ opacity: 0.2;
+}
+form input[type="radio"]:checked + label {
+ color: #2C2D2A;
+ padding: 0 30px;
+ background-color: #B6D6C8;
+ border-radius: 5px;
+}
\ No newline at end of file