256 Kilobytes

[Radio Buttons] How to Make a Buttonset (Without Using Bootstrap)

Articles in Style and Layout | By Some Guy

Published | Last Update

676 views, 0 RAMs, and 1 comment

The button group class/feature in the Bootstrap framework (class="btn-group") is useful.

To be able to use something similar without importing the Bootstrap framework, this is one option of functionality similar to Bootstrap's button set feature:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Button Sets -- Radio Elements */
        .button-set {
            overflow: auto;
            display: inline-flex;
            user-select: none;
        }
        /* Show/Hide Relevant Elements */
        
        .button-set label input[type=radio] {
            display: none;
        }
        
        .button-set label span.chk {
            visibility: hidden;
        }
        
        .button-set label input:checked ~ span.chk {
            visibility: visible;
        }
        /* Fixed Cosmetic */
        
        .button-set label {
            padding: 0.75em 1.50em;
            font-weight: bold;
            transition: background-color 0.2s;
        }
        
        .button-set label:first-child {
            border-radius: 8px 0 0 8px;
        }
        
        .button-set label:last-child {
            border-radius: 0 8px 8px 0;
        }
        
        .button-set label:hover {
            cursor: pointer;
        }
        /* Variable Cosmetic */
        
        .button-set {}
        
        .button-set label {
            background-color: Navy;
            color: white;
        }
        
        .button-set label:hover {
            background-color: DeepSkyBlue;
        }
        
        .button-set label span.chk {
            font-size: 1em;
            color: lime;
        }
    </style>
</head>
<body>
    <h2>Not Bootstrap Button Set</h2>
    <p>Here's a button set that uses Not Bootstrap.</p>
    <hr />
    <label for="comething">Some Field Name</label>
    <div class="button-set">
        <label>
            <input type="radio" name="type_id" value="1">
            <span class="chk">✓</span> Option 1
        </label>
        <label>
            <input type="radio" name="type_id" value="2">
            <span class="chk">✓</span> Option 2
        </label>
        <label>
            <input type="radio" name="type_id" value="3">
            <span class="chk">✓</span> Option 3
        </label>
        <label>
            <input type="radio" name="type_id" value="4">
            <span class="chk">✓</span> Option 4
        </label>
    </div>
    <hr />
    <p><em>The end.</em></p>
</body>
</html>
Download more RAM. 🐏 ⨉ 0Posted by Some Guy 2 years ago

Edit History

• [2018-12-02 3:43 PST] Some Guy (2 years ago)
• [2018-12-02 3:43 PST] August R. Garcia (2 years ago)
🕓 Posted at 02 December, 2018 03:43 AM PST

Profile Photo - Some GuySome GuyBasic Subscriber

It's time to post on the Internet.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

Very nice, as they say.

Download more RAM. 🐏 ⨉ 0Posted by August R. Garcia 2 years ago

Edit History

• [2018-12-02 3:47 PST] August R. Garcia (2 years ago)
🕓 Posted at 02 December, 2018 03:47 AM PST

Sir, I can do you a nice SEO.

Post a New Comment

Do you like having a good time?

Register an Account

You can also login to an existing account or reset your password. All use of this site is subject to the terms of service and privacy policy.

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account