Adjust the SVG to match the dimensions of the label, which may vary in both

How can I efficiently resize and embed SVG images into checkbox labels without using a viewbox attribute? Each SVG varies in height and width, making it challenging to find the best solution.

.check__button {
  display: none;
}

.check__icon {
  display: block;
  border: 3px solid;
  width: 70px;
  height: 70px;
  cursor: pointer;
}

.check__fill {
  fill: #9facbc;
}

.check__button:checked+svg .check__fill {
  fill: #737d8b;
}
<label class="check__icon">
  <input class="check__button check__youtube" type="checkbox">
  <svg width="141.176" height="100"  
       xmlns="http://www.w3.org/2000/svg"><defs>
    </defs><path class="check__fill" d="M56.012 68.441l-.006-39.947 38.147 20.041-38.141 19.906zm83.753-46.87s-1.383-9.795-5.612-14.112c-5.37-5.665-11.385-5.691-14.144-6.02C100.253 0 70.62 0 70.62 0h-.065S40.924 0 21.168 1.441c-2.762.327-8.774.353-14.147 6.018C2.788 11.774 1.41 21.57 1.41 21.57S0 33.079 0 44.582v10.789c0 11.505 1.412 23.008 1.412 23.008s1.376 9.797 5.609 14.112c...

<label class="check__icon">
  <input class="check__button check__fiverr" type="checkbox">
  <svg width="100" height="100"
       xmlns="http://www.w3.org/2000/svg"><defs>
    </defs><path class="check__fill" d="M43.75 0a28.156 28.156 0 0 0-28.125 28.125v3.125h-12.5V50h12.5v31.25h-12.5V100h43.75V81.25h-12.5V50h31.426v31.25H53.125V100h43.75V81.25h-12.5v-50h-50v-3....

htmlcsssvg

Answer №1

Check out this code snippet

.check__button {
    display: none;
}

.check__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid;
    width: 70px;
    height: 70px;
    cursor: pointer;
    margin-bottom: 10px;
}

.check__fill {
    fill: #9facbc;
    transform: scale(0.4);
}

svg:not(:root){
    width: auto;
    height: 40px;
}

.check__button:checked+svg .check__fill {
    fill: #737d8b;
}
<label class="check__icon">
    <input class="check__button check__youtube" type="checkbox">
    <svg width="141.176" height="100"
         xmlns="http://www.w3.org/2000/svg"><defs>
    </defs><path class="check__fill" d="M56.012 68.441l-.006-39.947 38.147 20.041-38.141 19.906zm83.753-46.87s-1.383-9.795-5.612-14.112c-5.37-5.665-11.385-5.691-14.144-6.02C100.253 0 70.62 0 70.62 0h-.065S40.924 0 21.168 1.441c-2.762.327-8.774.353-14.147 6.018C2.788 11.774 1.41 21.57 1.41...

...und-color: #ff4800;
}

.item:nth-child(5) {
    color: blue;
}

.active {
    font-weight: bold;
}

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

Glowing semi-opaque about spotify?

Recently, I decided to challenge myself by recreating the Spotify homepage using only pure Javascript and SCSS as a way to test my front-end development skills. You can view my progress so far at this link, although please note that it's still a work ...

csshtml

Trigger a click based on the CSS path starting from a specific element in the DOM

I am currently developing a feature for mouse activities, such as moving the mouse, clicking, and scrolling. I want to be able to record these activities and then playback them later on. So far, I have successfully recorded mouse movement, and now I need t ...

javascriptjqueryhtmlcss

How to place a stylish font over an image and recreate hover effects

I am looking to place social media icons below an image next to the photo's title, including Facebook, Twitter, Soundcloud, and Instagram. I want these icons to rotate along with the image when it is hovered over. HTML <div class="polaroid-image ...

javascriptjqueryhtmlcssimage

I desire a three-column layout where the middle column will expand in width if columns 1 and 3 are vacant

I have a three-column layout designed without using tables. <div id="main"> <div id="left"></div> <div id="content"></div> <div id="right"></div> </div> This is the CSS code: #left {width: 200px;fl ...

asp.netjqueryhtmlcss

Dominating React Components with Unique CSS Styles

Currently, I have developed a NavBar component. I've implemented some JavaScript code that changes the navbar's background color once it reaches 50px. However, I am facing an issue in applying this scroll effect to only one specific file and not ...

javascripthtmlcssreactjs

Emphasize the active item in the PHP header

Hey there! I've been trying to figure out how to highlight the current page in the header of my website. I'm using the include method to call the header on all pages, but I can't seem to figure out how to highlight the current page while sti ...

phphtmlcssheaderinclude

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

I'm working with this div from the Bootstrap framework: <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"> <div class="d-flex justify-content-between align-items-center"> <div class="h5 mb-0">Text text</div&g ...

htmlcss

If the overflow-x property is set to hidden for the html and body elements, the links in the footer will become unclickable as they will

Situation: Consider the following scenario with a simplified HTML example: position the footer behind the content and make it stick to the bottom when reaching the end of the page, the footer should slide up from behind the content I achieved this layo ...

htmlcssz-indexfootersticky-footer

How to target the following element with CSS that has a specified class name

Would it be possible to achieve this using CSS alone, or would I need to resort to jQuery? This is how my code currently looks: <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr class="some-class">...</tr> // My g ...

jquerycssselector

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

cssionic-frameworkionic4

Ways to transfer data from TypeScript to CSS within Angular 6

Trying to work with ngClass or ngStyle, but I'm struggling with passing the value. Here's my current code: strip.component.ts import { ... } from '@angular/core'; @Component({ selector: 'app-strip', templateUrl: &apo ...

htmlcssangulartypescript

Use the arrow key to move through the different layers

I'm working on enhancing a custom auto-complete feature using JQuery. My goal is to allow the user to navigate down into the auto-complete dropdown and then back up to the input box that triggered it initially. The code snippet below demonstrates how ...

jqueryhtml

Crafting an interactive saturation effect for mouseover interactions in a circular design

I'm looking to create a unique hover effect for my images. I have both a desaturated version and a full color version of the same image. My idea is to have mousing over the desaturated image reveal a circle spotlighting the color version underneath, a ...

javascriptjquerycssanimationmouseover

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

I've successfully implemented a packery image grid that is responsive and functional when the background image in the .item-content section is defined in the CSS file: http://codepen.io/anon/pen/eJdapq .item-content { width: 100%; height: 100%; ...

javascriptjqueryhtmlcsspackery

The jQuery .hasClass() function does not work properly with SVG elements

I am working with a group of SVG elements that are assigned the classes node and link. My goal is to determine whether an element contains either the node or link class when hovering over any of the SVG components. However, I am encountering an issue where ...

javascriptjqueryhtmlcsssvg

When utilizing a JQuery .animate function to transition a div from 0px to 450px in height, an unintended margin is produced during the process

I have been attempting to implement a collapsible footer using JQuery. While I have successfully integrated all the animation functions, there seems to be an issue with the animate function affecting the div (id=draw) by creating an unseen margin beneath i ...

jquerycssjquery-animate

Activate search bar by clicking on it

I am currently attempting a basic jQuery example to expand a search bar on mouse click, but for some reason, my code is not working as expected. I have a simple jQuery function to display the input field when the button with the class "expand" is clicked, ...

javascriptjqueryhtmlcss

Displaying the :before attribute while concealing the element solely with CSS

I have encountered a situation where I am unable to edit the HTML of a document, specifically a payment page on Shopify, for security reasons. Unfortunately, editing JavaScript is also restricted in this scenario. However, there is a workaround available ...

htmlcssinternet-explorer-8internet-explorer-9

Creating a replica of Airbnb using Bootstrap 5: Transforming the search bar into a button

I am looking to implement a search bar button similar to the one on airbnb using bootstrap 5, like this example: https://i.sstatic.net/oIIzv.png Here is an example of HTML code that you can use: <button type="button" class="btn btn-ligh ...

htmlcsstwitter-bootstrapbootstrap-5

CSS - Flex items not being affected by justify-content

Working on a small tech challenge and implementing flexbox. Despite setting display: flex; on the parent div, using justify-content with space-evenly in the same CSS property doesn't seem to have any effect. CSS snippet: .relatedFlex { display: f ...

htmlcssflexbox