Adjust SVG Checkbox to eliminate any unnecessary padding

I am attempting to customize the MUI5 checkbox CSS fields, and here is the current status:

https://i.stack.imgur.com/BROpS.png

These are my CSS classes:

 MuiCheckbox: {
  styleOverrides: {
    root: {
      ".MuiSvgIcon-root": {
        backgroundColor: "white",
      },
    },
  },
},

Here is the structure:

 <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-7w1q46-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CheckBoxIcon">
 <path id="kk" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
 </svg>

My query is how can I remove the white border without removing the background color? (as removing the background color makes the inner check transparent)

htmlcsssvgmaterial-ui

Answer №1

I encountered a challenge with the viewBox values that couldn't be overridden, but I managed to find a straightforward solution

Here is my revised CSS override:

 MuiCheckbox: {
  styleOverrides: {
    root: {
      ".MuiSvgIcon-root": {
        backgroundColor: "white",
        path: {
          transform: "translate(-2px, -2px) scale(1.2)",
        },
      },
    },
  },
},

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

Issue with closing the active modal in Angular TypeScript

Can you help me fix the issue with closing the modal window? I have written a function, but the button does not respond when clicked. Close Button: <button type="submit" (click)="activeModal.close()" ...

htmlangulartypescript

Organize Radio Selectors

My intention was to align the radio buttons as shown in the image below: https://i.stack.imgur.com/oPTjD.jpg However, the final result looked like this https://i.stack.imgur.com/Mixga.jpg Below is the code for your reference HTML <div class="form ...

htmlcssangular

What is React.js's approach to managing CSS files?

Currently, I am enrolled in Bootcamp at Scrimba where they utilize an online platform for teaching various courses. One of the topics covered is React and involves working with CSS files. When working on my local machine, I typically use the index.css file ...

javascripthtmlcssreactjs

Tips on utilizing browser scroll for horizontal overflow of internal div?

I'm working on creating a dynamic page with a tree-like structure that easily exceeds the width of the browser window. My goal is to enable horizontal scrolling for the entire page using the browser's scrollbar, without needing a separate scrollb ...

javascripthtmlcss

Dynamically changing the borders of WebGL canvases: a guide to adding and

Here is my code snippet for creating an HTML canvas: <canvas id="glCanvas" class="canvases" width="20" height="20></canvas> To set the color, I am using the following: gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); I am w ...

javascripthtmlcssborder

What is the best way to incorporate the parallax effect into a v-carousel?

Currently, I have a "v-carousel" containing multiple images and now I am looking to incorporate a parallax effect into it, similar to "v-parallax". <v-carousel cycle height="600" hide-delimiter-background show-arrows-on-hover> <v-carousel-i ...

cssvue.jsvuetify.js

Guide on transporting PNG files over the boundary

I am working with two specific css commands. code h1 { background: #000000; border-radius: 6px; color: #fff; display: block; font: 40px/60px "Sans", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier; padding: 40px 40px; text-align: center; ...

htmlcss

What is the method to update the switch label in Material UI when the state changes?

I'm exploring the use of Material UI's switch component. My goal is to display the label "Switch is ON" when the switch is toggled on, and "Switch is OFF" when it's toggled off. I'm still learning about managing state in React, so any g ...

reactjsformsmaterial-uistate

What is the best way to use Jquery to enclose a portion of a paragraph text within a

How can I wrap the content inside a span that comes after another span, inside a paragraph and a new span? To further illustrate this, consider the following example: <p>foo <span>bar</span> baz</p> The desired outcome is: <p& ...

javascriptjqueryhtml

Firefox's keyup event

Is it possible to detect a keypress using the jQuery keyup function, as I am facing an issue where it works in Chrome, Edge, IE, and Opera but not in Firefox. $(".textfield").contents().keyup(function(evnt) { document.getElementById("btn_save").style. ...

javascriptjqueryhtmliframejquery-events

Having trouble storing data accurately in local storage using React

I implemented a combination of useContext and useEffect to store useContext data in local storage, but I am facing challenges due to conditional rendering. The scenario involves displaying a sign-in button when the user is not logged in and a log-out butto ...

javascriptreactjsmaterial-ui

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...

javascriptc#htmlsql-server

In Chrome, the `Jquery $('input[name=""]').change(function will not be triggered unless there is an unhandled error following it

Here is a script that I've created to make certain inputs dependent on the selection of a radio button. The 'parent' input in this case is determined by the radio button choice. Upon document load, the script initially hides parent divs of ...

javascriptjqueryhtmlonchange

"Clicking on one item in the Bootstrap submenu doesn't close the other items,

I have this Javascript code snippet that deals with expanding and collapsing submenu items: <script type="text/javascript> jQuery(function(){ jQuery(".dropdown-menu > li > a.trigger").on("click",function(e){ var current ...

javascriptjqueryhtmlcsstwitter-bootstrap

Encountering a problem with Material UI where the drop-down options are appearing below the footer of the modal window

Hey there, I'm currently using Material UI and React Select. One issue I've run into is that my dropdown options are appearing below the modal window. You can check out the code sandbox demo here I've tried adjusting the z-index and changi ...

cssreactjsmaterial-ui

Changing color when mouse hovers using Jquery

Currently, I am in the process of converting a flash ad into an html5 ad. I found this demo here, and I would like to replicate the mouse hover effect showcased. When the cursor hovers over the details text in the banner, the entire background changes to ...

javascriptjquerycsshtml

When the clearOnBlur setting is set to false, Material UI Autocomplete will not

I recently encountered an issue in my project while using Material UI's Autocomplete feature. Despite setting the clearOnBlur property to false, the input field keeps getting cleared after losing focus. I need assistance in resolving this problem, an ...

javascriptreactjsautocompletematerial-ui

What is causing the background image size to adjust when the carousel is toggled?

Can you help me understand why the background-image increases in size vertically when transitioning from url/path to url/path2? I need it to stay the same size as it toggles through all the images. What mistake am I making and how can I correct it? Snipp ...

htmlcssdebuggingbootstrap-4

A guide on aligning a CSS item perfectly in the center using absolute positioning

I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way. My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utili ...

htmlcsscss-position

designing various containers and adjusting their divisions

I have a pop-up window that contains the code snippet below, defining a template within a "container": <form method="post" class="signin" action="#"> <div id='container'> <div> <div id="divFeeTitle"&g ...

javascriptjqueryhtmlcss