A Pen by Rob Levin

Developer
Rob Levin
Size
2,787 Kb
Views
14,161
  1. A Pen by Rob Levin Previews
  2. A Pen by Rob Levin HTML Codes
  3. A Pen by Rob Levin CSS Codes

How do I make an a pen by rob levin?

What is a a pen by rob levin? How do you make a a pen by rob levin? This script and codes were developed by Rob Levin on 13 December 2022, Tuesday.

A Pen by Rob Levin Previews
IQ Test

A Pen by Rob Levin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Rob Levin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- RADIO ACTIONS -->
<h6>Radio Actions</h6>
<div class="field-radio-container"> <input type="radio" class="field-radio field-radio-action" name="colors-set" value="uno" id="uno"> <label for="uno">Click On Me!</label>
</div>
<div class="field-radio-container"> <input type="radio" class="field-radio field-radio-caution" name="colors-set" value="dos" id="dos"> <label for="dos">Mwa ha ha…I'm Dangerous!</label>
</div>
<!-- LARGE SIZE -->
<h6>Large Sized Radio</h6>
<div class="field-radio-container"> <input type="radio" class="field-radio field-radio-large" name="large-set" value="large1" id="large1"> <label for="large1">large Option</label>
</div>
<div class="field-radio-container"> <input type="radio" class="field-radio field-radio-large" name="large-set" value="large2" id="large2"> <label for="large2">large Option 2</label>
</div>
</body>
</html>

A Pen by Rob Levin - Script Codes CSS Codes

.field-radio-container { position: relative; display: inline-block;
}
.field-radio { display: none;
}
.field-radio + label { vertical-align: middle; color: inherit;
}
.field-radio + label:before { margin-right: 10px; padding: 10px; display: inline-block; vertical-align: middle; content: ""; background-color: white; border: 1px solid #ddd; border-radius: 50%; box-shadow: inset 0px 2px 1px rgba(0, 0, 0, 0.2);
}
.field-radio:checked + label:after { content: ''; background: #ccc; border: 1px solid #ccc; position: absolute; top: 4px; left: 4px; padding: 6px; border-radius: 50%;
}
.field-radio-large:checked + label:after { top: 6px; left: 6px; padding: 12px;
}
.field-radio-large + label:before { padding: 18px;
}
.field-radio-action + label { color: green;
}
.field-radio-action + label:before { color: palette(action); border: 1px solid green; box-shadow: none;
}
.field-radio-action:checked + label:after { background-color: green; border: 1px solid green;
}
.field-radio-caution + label { color: red;
}
.field-radio-caution + label:before { color: red; border: 1px solid red; box-shadow: none;
}
.field-radio-caution:checked + label:after { background-color: red; border: 1px solid red;
}
A Pen by Rob Levin - Script Codes
A Pen by Rob Levin - Script Codes
Home Page Home
Developer Rob Levin
Username roblevin
Uploaded December 13, 2022
Rating 3
Size 2,787 Kb
Views 14,161
Do you need developer help for A Pen by Rob Levin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob Levin (roblevin) Script Codes
Name
Simple Snap.svg Example
Backed by UXR
Zero Specificity vs No Specificity
Linear Step Keyframe Animation
Simple Snap.svg Drawing Example
Collapsing Margins
Horizontal Formatting
Inline SVG Fill and Stroke
Starter SVG
SVG Frontend Masters Study Notes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!