256 Kilobytes

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

Articles in Style and Layout | By Some Guy

Published 10 months agoSun, 02 Dec 2018 03:43:38 -0800 | Last update 10 months agoMon, 03 Dec 2018 06:38:38 -0800

259 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. 🐏 ⨉ 0 Posted by Some Guy 10 months ago

Edit History

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

Profile Photo - Some Guy Some Guy
🗎 3224 🗨 41 🐏 31
Subscriber

It's time to post on the Internet.


Account created 10 months ago.
3224 posts, 41 comments, and 31 RAMs.

Last active 5 months ago:
Posted thread Miscellaneous Selenium Utility Functions

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 191 🗨 941 🐏 285
Site Owner

Very nice, as they say.

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 10 months ago

Edit History

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

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

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
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.