256 Kilobytes

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

Articles in Style and Layout | By Some Guy

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

118 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 5 months ago

Edit History

• [2018-12-02 3:43 PST] Some Guy (5 months ago)
• [2018-12-02 3:43 PST] August R. Garcia (5 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 5 months ago.
3224 posts, 41 comments, and 31 RAMs.

Last active 4 weeks ago:
Posted thread Miscellaneous Selenium Utility Functions

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 136 🗨 707 🐏 164
Site Owner

Very nice, as they say.

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

Edit History

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

The CIA wants all code in the cloud under their lock and key. They want to ban compilers and make people think HTML is computer programming. - Terry A. Davis

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.