I am seeking a creative way to present a boolean selection for users in a card-style format. Despite my efforts, I have not been able to find a suitable solution on StackOverflow. I want to avoid using traditional radio buttons or any generic Bootstrap designs.
Here is an example of the desired outcome: https://i.sstatic.net/bdCkw.png
I searched everywhere for an answer, but ended up solving it myself. Enjoy ;-)
label {
width: 100%;
font-size: 1rem;
}
.card-input-element+.card {
height: calc(36px + 2*1rem);
color: var(--primary);
-webkit-box-shadow: none;
box-shadow: none;
border: 2px solid transparent;
border-radius: 4px;
}
.card-input-element+.card:hover {
cursor: pointer;
}
.card-input-element:checked+.card {
border: 2px solid var(--primary);
-webkit-transition: border .3s;
-o-transition: border .3s;
transition: border .3s;
}
.card-input-element:checked+.card::after {
content: '\e5ca';
color: #AFB8EA;
font-family: 'Material Icons';
font-size: 24px;
-webkit-animation-name: fadeInCheckbox;
animation-name: fadeInCheckbox;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes fadeInCheckbox {
from {
opacity: 0;
-webkit-transform: rotateZ(-20deg);
}
to {
opacity: 1;
-webkit-transform: rotateZ(0deg);
}
}
@keyframes fadeInCheckbox {
from {
opacity: 0;
transform: rotateZ(-20deg);
}
to {
opacity: 1;
transform: rotateZ(0deg);
}
}<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://daemonite.github.io/material/css/material.min.css" rel="stylesheet">
<div class="container">
<div class="row mt-4">
<div class="col">
<div class="jumbotron">
<h1>Using cards as radio buttons in Bootstrap 4 - Advanced Components</h1>
<p class="lead">by djibe.</p>
<p class="text-muted">(thanks to BS4 + Daemonite Material Design for Bootstrap 4)</p>
<h2>
Tutorial
</h2>
<ol>
<li>
Wrap a standard radio input within a <code>label</code>:<br>
<code>
<label>
<input type="radio" name="organization" class="card-input-element d-none" id="demo">
</label>
</code>
</li>
<li>
Set CSS property <code>display: none</code> to this radio input. Here I use Bootstrap 4 utility <code>d-none</code> class.
</li>
<li>Within this label, just after the <code>input type="radio"</code>, now add a simple span styled as a card:<br>
<code><div class="card card-body d-flex flex-row justify-content-between align-items-center">
Organization 1
</div></code>
</li>
<li>
Add some CSS (refer to this fiddle CSS) for a better look.
</li>
<li>Et voilà</li>
</ol>
<h2>
Demo
</h2>
<p>
Click on those cards to play with radios styled as cards.<br> You can remove the animated check icon effect.
</p>
<p class="lead">
Choose your Organization:
</p>
<label>
<input type="radio" name="demo" class="card-input-element d-none" id="demo1">
<span class="card card-body bg-light d-flex flex-row justify-content-between align-items-center">
Organization 1
</span>
</label>
<label class="mt-3">
<input type="radio" name="demo" class="card-input-element d-none" value="demo2">
<span class="card card-body bg-light d-flex flex-row justify-content-between align-items-center">
Organization 2
</span>
</label>
</div>
</div>
</div>How can I draw two images on one canvas without the first image possibly loading slower than the second one and appearing on top of it? I want to ensure that the second image is always drawn on top of the first image. Any suggestions? ...
Currently, I am attempting to create a dynamic seating chart on a webpage within an asp.net-mvc site using data retrieved from a database. Initially, I used a table to organize the grid layout of rows and columns, which resembled this structure: The datab ...
I am encountering an issue with my nested list Items that are draggable and droppable. When I reach the bottom of the page, I want it to automatically scroll down. Take a look at the screenshot below: https://i.sstatic.net/ADI2f.png As shown in the image ...
I'm currently working with Gwt and have encountered a problem with styling buttons. Let's take a look at the following code snippet: .marginRight{ margin-right: 10px; } FlowPanel myFP=new FlowPanel(); Button myButton=new Button("Button"); Butt ...
Looking for some guidance on using flex as a newbie here. Currently working on designing a website page and struggling with centering a div tag on the page using flex. Appreciate any assistance or advice you can provide. Thank you! ...
After double-checking, it's confirmed that the images do exist on the server. I have embedded the image in a CSS rule using the following code: .Invite{background: url("../images/interface/Shop/Btn_Ad_Invite_all.png") 0px 0px;} .Invite:hover{ backgr ...
I'm a newcomer to Next.js and I'm still trying to wrap my head around how the caching works. Let's take a look at this simplified example: An index page that displays either Test1 or Test2 components, based on whether the current minute is ...
It seems that the w-11/12 class is not behaving as expected. According to the documentation, it should give a width of 91.666% but instead, it's filling up 100%. This issue only occurs with the value 11, while other values work fine. Has anyone else e ...
Whenever I use ckeditor, I find that pressing enter results in two <br /> tags being inserted. While I want to keep the line break tags, having them appear twice is not ideal. In my config.js file, I have set the configuration for the enter key as f ...
I created a custom WordPress theme, and I am having trouble styling the bootstrap navigation. I want the text to be white and change to brown when selected. However, my attempts to add a separate class for H1 tags on the blog post page have not been succes ...
Experiencing a puzzling issue that seems to have a straightforward solution that I just can't see. I am trying to switch the background to a background-image, but for some reason, the image is not displaying. The code provided below does not show the ...
Currently, I am in the process of creating a website that allows clients to easily send an email with the content they are viewing. I want users to click on a button which will open their default mail client (compatible with both Mac and PC) and automatica ...
Currently, I am working on a project that requires a responsive page layout using divs. The layout should resemble a grid, with 3 columns that reorganize into 2 columns on smaller screens. Here is the basic HTML structure I have so far: <div id="main" ...
I have a custom component that I am using multiple times on a Vue page. I want to customize the background color for each instance of this component. Here is the code for my component: <template> <div class="project-card" :style="{backgroundCo ...
Having an issue incorporating a jQuery progress bar into a ul li tag. <ul> <li> <a href="test">test</a> <div id="progressbar"></div> </li> </ul> I have set display: block for the anchor tag and ...
I have a bunch of Wordpress posts. When the browser size is reduced to a certain point, I must relocate one specific element from each post to another element as per the design requirements. Here is the code I am using to iterate through each post and mov ...
I need help targeting the span element within a checkbox label in order to change its background color when the checkbox is checked. <div className={classes.container}> <input type="checkbox" id="checkboxid" /> <lab ...
I have been experimenting with implementing custom sorting in a mat-table using API response data. Unfortunately, I have not been able to achieve the desired result. Take a look at my Stackblitz Demo https://i.sstatic.net/UzK3p.png I attempted to implem ...
I'm working on a website that has a flash player embedded, and I'm trying to add an overlay that can display HTML content. The plan is to have the flash element fade out to 0.5 opacity before showing the HTML text. It works perfectly in Google Ch ...
I am having an issue with the JavaScript function I have created to load content from another URL into the current document. For some reason, both contentHtml and menuHtml variables are showing as undefined. Can someone please help me identify where I we ...