Enhancing Checkbox Styles with Foundation 6 CSS

Exploring the creation of custom CSS Checkboxes using existing CSS code.

.nk-btn-color-dark-5 {
  background-color: #293139;
  border-color: #101215;
  border-style: solid;
}

.nk-btn-color-dark-5:hover,
.nk-btn-color-dark-5.hover {
  background-color: #3b4550;
  border-color: #4a5665;
}

.nk-btn-color-dark-5:active,
.nk-btn-color-dark-5.active {
  background-color: #4a5665;
  border-color: #59687a;
}

.nk-btn-color-dark-5.nk-btn-outline {
  color: #293139;
}

.nk-btn-color-dark-5.nk-btn-outline:hover,
.nk-btn-color-dark-5.nk-btn-outline.hover {
  color: #14171b;
}

.nk-btn-color-dark-5.nk-btn-outline:active {
  color: black;
}

.nk-btn-hover-color-main-7.nk-btn-color-white:hover,
.nk-btn-hover-color-main-7.nk-btn-color-white.hover,
.nk-btn-hover-color-main-7.nk-btn-color-white:active,
.nk-btn-hover-color-main-7.nk-btn-color-white.active {
  color: #fff;
}

.nk-btn-hover-color-main-7:hover,
.nk-btn-hover-color-main-7.hover {
  background-color: #FFD700;
  border-color: #a5102c;
}

.nk-btn-hover-color-main-7:active,
.nk-btn-hover-main-7.active {
  background-color: #FFD700;
  border-color: #a5102c;
}
<input id="checkbox1" type="checkbox" name="prod" value="1">
<label class="nk-btn nk-btn-rounded nk-btn-color-dark-5 nk-btn-hover-color-main-7" for="checkbox1">Add to Cart</label>

Struggling with implementing the current CSS and HTML for the button. Seeking guidance from this resource: https://codepen.io/anon/pen/LJVgQm

Any assistance would be greatly appreciated. Thank you

htmlcsscheckbox

Answer №1

To make the checkbox invisible and impact the styling of its adjacent label, you need to remember two key points:

The input:checked + label selector targets the label next to a checked checkbox using the sibling selector.

The CSS rule #checkbox1{display: none;} hides the checkbox itself.

#checkbox1{display: none;}

.nk-btn-color-dark-5 {
  background-color: #293139;
  border-color: #101215;
  border-style: solid;
}

.nk-btn-color-dark-5:hover,
.nk-btn-color-dark-5.hover {
  background-color: #3b4550;
  border-color: #4a5665;
}

.nk-btn-color-dark-5:active,
.nk-btn-color-dark-5.active {
  background-color: #4a5665;
  border-color: #59687a;
}

.nk-btn-color-dark-5.nk-btn-outline {
  color: #293139;
}

.nk-btn-color-dark-5.nk-btn-outline:hover,
.nk-btn-color-dark-5.nk-btn-outline.hover {
  color: #14171b;
}

input:checked + label,
.nk-btn-color-dark-5.nk-btn-outline:active {
  color: black;
}

.nk-btn-hover-color-main-7.nk-btn-color-white:hover,
.nk-btn-hover-color-main-7.nk-btn-color-white.hover,
.nk-btn-hover-color-main-7.nk-btn-color-white:active,
.nk-btn-hover-color-main-7.nk-btn-color-white.active {
  color: #fff;
}

.nk-btn-hover-color-main-7:hover,
.nk-btn-hover-color-main-7.hover {
  background-color: #FFD700;
  border-color: #a5102c;
}

input:checked + label,
.nk-btn-hover-color-main-7:active,
.nk-btn-hover-main-7.active {
  background-color: #FFD700;
  border-color: #a5102c;
}
<input id="checkbox1" type="checkbox" name="prod" value="1">
<label class="nk-btn nk-btn-rounded nk-btn-color-dark-5 nk-btn-hover-color-main-7" for="checkbox1">Add to Cart</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that the div from the header file remains fixed directly above the fixed div from another file?

This is the header section that I want to keep fixed within the "header" div. <div id="header" style="display:block;"> <table style="width:100%"> <tr> <td class="col-sm-6" style="background-color:lavender;"><a href ...

javascriptphpjqueryhtmlcss

Aligning Card in Center using Bootstrap

Having trouble centering the card properly, as a beginner I'm not sure what to do. </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="col-md-4 co ...

htmlcssbootstrap-5

Strategies for incorporating a string into an ng-template using HTML

Suppose I have an ng-template as follows: <ng-template #templateRef> <button (click)="testClick()" Click me </button> <a I'm a link </a> </ng-template> Now, I want to utilize it in my html template li ...

htmlangular

Tips for indicating an error when an array contains empty values

Object = { 0 : { NAME: 'A' , PET :'DOG' , AGE : 'NINE' }, 1 : { NAME: 'B' , PET :'CAT' , AGE : 'TEN' }, 2 : { NAME: 'C' , PET :'TURTLE' , AGE : '' } } HT ...

javascripthtmlarraysangularjsdropdown

Alter numerous classifications based on varying circumstances at regular intervals

This code snippet is designed to change randomly all the <div class="percentx"> elements, for example from <div class="percent31"> to <div class="percent52"> (with values between 1-100). It works smoothly. I ...

javascripthtml

Show a table containing dynamic information, featuring 10 rows for each column. The header should be present for each additional column that is added

I have incoming dynamic data that I need to display in columns, with 10 records in each row. Currently, I am able to display 10 rows as expected. However, I want the header to repeat each time an additional column is added. How can I achieve this using the ...

htmlcssdynamicbootstrap-4flexbox

The functionality of Nativescript squared buttons is not functioning as expected

I recently developed a Nativescript app using Angular, incorporating customized buttons. However, I have encountered an issue where I am unable to achieve perfectly squared buttons with the desired appearance. Here is my CSS code: Button { font-size: ...

cssnativescriptangular2-nativescript

Could someone explain to me why searchQuery.value is coming up as undefined?

Within my development task, I am endeavoring to create a functional search icon on the header bar that allows users to input Pokémon names for searching purposes. Despite my efforts, I am consistently facing a console error message suggesting "searchQu ...

javascripthtmljquerymodal-dialogbootstrap-5

Disable the meta tags in Zurb Foundation 5

I have searched extensively online but haven't been able to find a solution for this issue. How can I disable these zurb foundation 5 meta tags in the <head>: <meta class="foundation-mq-small"> <meta class="foundation-mq-small-only"> ...

javascripthtmlzurb-foundationzurb-foundation-5

Demonstrating the transformation of child elements into parent elements through angular 6 ngFor

I have a JSON array dataset where each object may contain nested arrays. In order to display the inner nested array elements as part of the parent array using Angular's NgFor, I need to format the input like this: [{ 'id': 1, 'tit ...

javascripthtmlangular

What is the best way to create a dropdown menu within an iframe that appears on top of all other frames?

The code snippet below is from my frameset.jsp file: </head> <iframe width="100%" src="mail_frame.html"></iframe> <iframe width="105px" height="100%" src="sidenav.html" id="leftnav" name="leftnav" ></iframe> ...

htmlcss

Is there a way to make the hoverzoom effect only apply to a specific object instead of all objects?

I'm currently troubleshooting my code in order to implement a hover effect on Mui <cards> when a user hovers over the object. I have managed to make it work partially, but the issue is that the effect gets applied to all objects instead of just ...

javascriptcssreactjsmaterial-ui

Achieve perfect alignment both vertically and horizontally within a container-fluid using Bootstrap

As the heading suggests, I'm having trouble centering content inside a column within .container-fluid in Bootstrap 4. Below is the code I'm using, but I can't figure out what's wrong. Can someone please assist me? <link href="htt ...

htmltwitter-bootstrapcssbootstrap-4

When the button is clicked, my goal is to increase the value of the text field by one using JavaScript

I need the functionality for each button to increment the value text field located next to it <input type="number" value="0" min="0" max="5" step="1" id="qty"/> <button onclick="buttonClick()" type="button" class="btn btn-success btn-sm" id="add" ...

javascripthtmlbootstrap-4dom-events

Choosing Between EMs and Pixels for Font Sizes: A 2011 Perspective

In the past, EMs were favored over pixels for font size because they could scale with IE6 while pixels could not. Nowadays, modern browsers can handle pixel-sized font scaling correctly. Another advantage of EMs is that they cascade, unlike pixels. But if ...

cssaccessibility

Slideshow featuring cards with text overlay

I am working with a bootstrap carousel and trying to place a card with text on top of it. No matter what I try, the card is not appearing as desired. Here is an example of what I want to achieve: https://i.sstatic.net/tjW3w.png Below is the code snippet: ...

htmlcsstwitter-bootstrapbootstrap-4

Incapable of composing text using the MUI SearchBar

I'm having trouble with my Material UI search bar - it's not letting me type anything into it. How can I resolve this issue? Despite trying the suggested code snippets from other answers, I keep encountering errors when integrating them into my ...

javascripthtmlreactjsmaterial-ui

I'm encountering an issue: "AppDepartment" class not found while trying to view create.blade.php in E:proiecteHRmanagement-app esourcesviewsadminuser. Can you help me troubleshoot this error?

Need assistance with the error message "Class 'APP\Department' not found" while working on my HR Management App. I am trying to include departments and roles in my form. This is my UserController: <?php namespace App\Http\Cont ...

phphtmllaravelclass

How to transfer a property value from a pop-up window to its parent window using JavaScript

In the parent window, when a button is clicked, the page content is stored in an object. Simultaneously, a pop-up window with a radio button and a save button opens. Once a radio button is clicked and saved, the goal is to send the radio button value back ...

javascriptjqueryhtml

Leveraging JavaScript to access the margin-top property of the HTML and body tags

I'm having trouble retrieving the "marginTop" style property from the <html> and <body> tags. While Chrome developer tools shows that margin-top is being set via in-HTML CSS: <style type="text/css" media="screen"> html { margin-top: ...

javascripthtmlcss