Tips for styling a mat-checkbox correctly

I'm working on customizing the appearance of a mat-checkbox (material2) to meet the following specifications:

Always display a black border (#000000), regardless of whether the checkbox is checked or not

When the checkbox is checked, show a white tick on a teal background with the black border still visible

When unchecked, the inside of the checkbox should be an off-white color (#dddddd)

Currently, I've managed to set the border color, but it disappears when the checkbox is checked behind the teal color

I can also set the unchecked background color, but then the black border vanishes. If I remove this setting, the border shows up but the background color is incorrect.

The SCSS properties I have set are as follows:

::ng-deep .mat-checkbox .mat-checkbox-frame {
    border-color: mat-color($darkPrimary, darker); //black
  }

::ng-deep .mat-checkbox-background {
    background-color: mat-color($darkPrimary, 200); //off-white
}

It appears that whatever background color I choose overrides the border style. Additionally, when the checkbox state changes, the black border briefly reappears and then disappears again. How can I achieve these requirements?

cssangulartypescriptangular-material2

Answer №1

After some experimentation, I discovered that angular checkboxes are constructed in layers, with the final "tick" layer appearing on top of the black border.

// Styling for background border
.mat-checkbox .mat-checkbox-frame {
    border-color: black;
    background-color: #dddddd
}

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    margin-top: 1px;
    margin-left: 1px;
    width: 18px;
    height: 18px;
}

By adjusting the size and position of the front layers, I was able to ensure that the border remains visible even when the checkbox is checked.

Answer №2

To customize the appearance of the unchecked checkbox:

.mat-checkbox-background{
    background-color: transparent;
    svg path{
        fill: transparent;
    }
    .mat-checkbox-checkmark-path {
         stroke:transparent;
         //stroke is the checked mark only
        }
}

To modify the look of the checked checkbox:

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: #2cc3f8 !important;
    svg path {
        fill: #2cc3f8 !important;
    }
}

Answer №3

Feel free to add the following code snippet to your style.css document. While I've set the background color to red, you can modify it as needed:

.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #d71e2b;
}

Answer №4

In order to customize the appearance of a checkbox, you can utilize the ::ng-deep directive as demonstrated in the code snippet below.

::ng-deep mat-checkbox.yourcheckbox .mat-checkbox-frame{
   border: 0px;
}

Answer №5

While I may be arriving late to the party, have you considered utilizing this alternative approach? Feel free to customize as needed:

::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #437891 !important;

}

Answer №6

::ng-deep .mat-checkbox .mat-checkbox-frame {
    border-color: #fa3131;
}

::ng-deep .mat-checkbox-checked .mat-checkbox-background {
    background-color: #fa3131 !important;
}

https://i.sstatic.net/TAy8g.png

Answer №7

Here is a solution that I found effective:

::ng-deep .mat-checkbox {
  margin-right: 8px !important;
}

Answer №8

This is the CSS code that I used to customize the appearance of a checked checkbox:

mat-checkbox.mat-checkbox.mat-checkbox-checked label > span.mat-checkbox-inner-container > span.mat-checkbox-background > svg.mat-checkbox-checkmark {
    /* INSERT YOUR STYLES HERE */
}

I added this code at the end of my global styles.css file and made sure to use !important to override any conflicting styles.

Answer №9

If you want a blue checkmark on a white background when selected and a white border when not selected, I found the following solution effective (even though ng-deep is now considered outdated):

:host ::ng-deep {
  .mat-checkbox .mat-checkbox-frame {
    border-color: white !important;
  }

  .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: white !important;

    svg path {
      stroke: blue !important;
    }
  }
}

Answer №10

Customizing Angular 13 Checkbox Design

<mat-checkbox color="accent" [(ngModel)]="node.Checked" (change)="checkIndeterminate(node, $event)">
        {{node.name}}
</mat-checkbox>

Snippet added to styles.css:

.mat-checkbox.mat-accent .mat-checkbox-frame { border-color: black !important }
.mat-checkbox.mat-accent .mat-checkbox-background { background-color: rgba(0,0,0,0); }
.mat-checkbox.mat-accent .mat-checkbox-checkmark-path { stroke: black !important }

Outcome: Unchecked checkbox has a white background with a black border, while checked checkbox showcases a white background with black border and checkmark.

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 are some ways to access Angular's form array within HTML code?

.ts import { Component, OnInit } from '@angular/core'; import { HelloServiceService } from 'src/app/hello-service.service'; import { FormBuilder, FormGroup, FormControl, FormArray, Validators } from '@angular/forms'; @Compone ...

javascripthtmlangulartypescript

Incorporate a JavaScript script into an Angular 9 application

I have been experiencing issues trying to add a script.js file to angular.json and use it in one component. Adding a script tag directly to my HTML file is not the ideal solution. Can someone suggest an alternative approach or point out what I may be missi ...

javascriptangulartypescripttags

Trouble linking HTML, Javascript, and CSS - seeking help to get them working properly

Hey there! I'm currently trying to transfer my project from Codepen at here to repl.it (This project) which you can find at this link. Don't forget to click run after checking it out! The code is working perfectly fine on Brackets with the same ...

jqueryhtmlcss

Twitter Bootstrap 3.3.5 navigation menu with a drop-down feature aligned to the right

I've been attempting to position the drop-down menu all the way to the right, following the search input field and submit button. I've tried using pull-right and navbar-right classes without success. Is there a method to accomplish this? <na ...

htmlcsstwitter-bootstrap-3

Removing Shadow, Border, and Outline from Bootstrap v5.0.2 Navbar

I have been struggling to get rid of the shadow/outline/border on my navigation bar. Despite trying various CSS tweaks, I have not been successful. Below is the specific HTML code: <nav class="navbar navbar-expand-sm" id="site-navigation ...

htmlcssbootstrap-5

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

htmlcss

Determine the Angular object's type even if it may be undefined

Currently diving into Angular and looking to create a method that can determine if an object is of type Dog (identified by a woof property). This is the code snippet I have put together so far: export class SomeClass { public animal?: Dog | Cat; ... ...

angulartypescriptundefined

Guide to changing the color of SVG images on a live webpage

I'm having trouble changing the color of a specific part within an svg image (created in Inkscape). I believe CSS is the solution, but I can't seem to select the id from the particular SVG file. The object in the SVG has the id='ToChange&apo ...

javascripthtmlcsssvg

What is the correct way to apply styles universally instead of using "*" as a selector?

With Nextron, I was able to successfully run my code, but upon opening the window, I noticed that the body tag had a margin of 8px. Although I managed to change this using the dev tools, I am unsure how to permanently apply this change in my code. When att ...

javascriptcssnext.jselectron

How can we effectively display the cookie value within the template by utilizing observables and selectors in conjunction with the ngx-cookie-service library?

I'm wondering if there's a seamless approach to leverage observables for dynamically retrieving a cookie value, essentially creating a "reactive" cookie. Although typical solutions involve utilizing this.cookieService.get("cookieName") within ser ...

angularngrxngx-cookie-service

One of the unique CSS properties found in the NextJS setup is the default 'zoom' property set to

Even though I already found a solution to the problem, I can't help but wonder what the author meant by it. Hopefully, my solution can help others who may encounter the same issue. After installing the latest NextJS version 13.2.4 on my computer, I e ...

cssreactjsnext.js

converting nested object structures in typescript

I'm trying to flatten a nested object in my Loopback and Typescript controller Here's the structure of my model : export class SampleModel { id: number; code: number; guide?: string; gradeData?: string; } Take a look at this example obj ...

javascripttypescriptloopbackjsloopback3

Stacking pictures with CSS and absolute placement

I have designed a webpage where I need to layer three images in a specific order to create a background for content placement without any movement during scrolling. Fixed positioning is not suitable for this purpose. Below is the sequence in which the imag ...

htmlcsscss-position

What's the best way to process a string array using iteration in Typescript?

I have an array of colors: colors = ['red','blue','purple']; I would like to display the following message: colors in ('red','blue','purple') When I tried to achieve this using forEach metho ...

javascriptarraysstringtypescriptloops

Error: The AppModule encountered a NullInjectorError with resolve in a R3InjectorError

I encountered a strange error in my Angular project that seems to be related to the App Module. The error message does not provide a specific location in the code where it occurred. The exact error is as follows: ERROR Error: Uncaught (in promise): NullInj ...

angulartypescript

A guide to troubleshooting and resolving the elusive 500 Server Error in Next JS API

Currently, I am in the process of developing a chat bot using the innovative OPEN AI GPT 4 Model within NextJS. However, upon sending a POST request to http://localhost:3001/api/generate, I am faced with a Response displaying a status code of 500 along wit ...

reactjstypescriptnext.jsopenai-api

Arranging Pipe Methods in RxJS/Observable for Optimal Functionality

In the class Some, there is a method called run that returns an Observable and contains a pipe within itself. Another pipe is used when executing the run method. import { of } from 'rxjs'; import { map, tap, delay } from 'rxjs/operators&ap ...

angulartypescriptrxjs

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

javascriptjquerycssd3.jsuser-input

The html-duration-picker is not being displayed in the proper format

I've been working on integrating an external library that allows for inputting document length. Specifically, I'm using the html-duration-picker library, but it seems like the input functionality is not quite right for durations. Could it be th ...

javascriptangulartypescript

Unconventional border effect while hovering over image within navigation container of Bootstrap

Whenever I hover over the image inside the navigation bar, there is a strange white/gray border that appears. It's quite annoying. Does anyone know how to remove this border? Here is the code snippet causing the issue: <ul class ...

htmlcsstwitter-bootstrap