Unable to adjust the width of a label element using CSS specifically in Safari browsers

Here's the issue I'm facing with my HTML code

<input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked">
<label for="assets[AAA]"></label>

In my CSS, I have the following code

input[type=checkbox].c_green {
    display:none;
}
input[type=checkbox].c_green+ label:before {
    content:"";
    display: block;
    width:1em;
    height:1em;
    border: 2px solid #66BC29;
    text-align: center;
    line-height:1em;
}
input[type=checkbox].c_green:checked + label:before {
    content:"\2713";
    display: block;
    font-size:1em;
    color:#66BC29;
}

In Safari, the green label drawn after the hidden checkbox has no width if the checkbox is not checked (value="") and not visible. However, this works fine in Chrome and Firefox.

Can you identify what is wrong with the CSS code above?

javascripthtmlcsssafari

Answer №1

Opt for display: inline-block over display: block when styling labels

Using CSS

input[type=checkbox].c_green {
     display:none;
}
input[type=checkbox].c_green+ label:before {
     content:"";
     display: inline-block;
     width:1em;
     height:1em;
     border: 2px solid #66BC29;
     text-align: center;
     line-height:1em;
}
input[type=checkbox].c_green:checked + label:before {
     content:"\2713";
     display: inline-block;
     font-size:1em;
     color:#66BC29;
}

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

React Native: Implementing scroll-based header animations in ScrollView

Currently, I am working on implementing an animated header with ScrollView on the screen. In this implementation, I need to set my view based on the Y position of the ScrollView during scrolling. This is how it's done: const onScroll = ({ nativeEvent: ...

javascriptreactjsreact-nativescrollviewreact-animations

What is the method for utilizing AngularJS to access the HTML input FileUpload FileList object?

I am looking to retrieve the values of a FileList object after selecting files using an HTML input FileUpload element. Although I can see the FileList object in the console window when I console.log it, I am facing challenges accessing the values using Ang ...

javascriptangularjsfile-upload

Refresh Google Maps without showing gray areas on the screen

Currently, I am utilizing the Google Maps API v3 in javascript and frequently reloading the map using an app.get while also incorporating layers and bookmarks via mongodb. Whenever I reload the map to erase everything, a gray background appears in the div ...

javascriptjquerymongodbgoogle-mapsgoogle-maps-api-3

Setting up a simple configuration for WebGl and Javascript

I am currently using OSX 10.9.5 (Mavericks) and following a WebGL tutorial script provided on . I copied and pasted the code from the tutorial into TextEdit and saved it as HTML with the following file structure: webgl | +--index.html | ...

javascriptthree.js

Is the max and min-width being properly set by the keen-slider__slide class in keen-slider?

Check out my code snippet below: import React from 'react' import { useKeenSlider } from 'keen-slider/react' // Styles import 'keen-slider/keen-slider.min.css' interface Props { children: any } // const animation = { du ...

javascriptreactjsnpmnext.jskeen-io

Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: https://i.sstatic.net/DM8sX.png And this is how I want it to appear: https://i.sstatic.net/BXGpW.png Is there a way to achieve the ...

javascripthtmlcsslayoutbootstrap-4

Efficient JavaScript File Parsing with the Use of Breakpoints

Currently, I am developing a small web application that requires the user to upload a .csv file, which is then parsed into an array using JavaScript. However, I have encountered an issue where the JavaScript code only functions properly when I have develop ...

javascriptd3.js

HTML code for adding a dropdown menu inside a table cell

I am trying to set up a table where one cell functions as a dropdown menu. The data.field is being fetched from the backend and I want it to be displayed during rendering. Additionally, a fList is also retrieved from the backend. When a user clicks on th ...

htmlcssangulartypescriptangular8

Adding information to Google Cloud Firestore while disconnected from the internet

I am currently facing an issue with my code. It works perfectly fine when the application is online, but fails to execute the promise resolution or rejection when offline. I have searched through the cloud firestore documentation and found examples on qu ...

javascriptfirebasegoogle-cloud-firestore

Having trouble with a peculiar for_of loop issue in Node.js: struggling to iterate correctly

Currently immersed in a Python project, I find myself in need of retrieving data from a Node.js API. Despite my limited knowledge of Node.js, I attempted to write some code for this purpose. Here is the code snippet: const SneaksAPI = require('sneaks ...

javascriptnode.js

How can AngularJS service methods be assigned to controller $scope for use in an ng-repeat loop in the view?

As part of my development process, I decided to refactor my controller code in order to make it more reusable across multiple controllers. The original version of the controller (colorController.js) worked perfectly fine before I attempted to refactor it i ...

javascriptangularjsangularjs-scopeangular-servicesangular-controller

Managing redundant asynchronous data in AngularJS

Imagine this scenario: In your AngularJS application, a user is spamming input which triggers numerous asynchronous data calls on the backend. This results in constant changes to the displayed data as each fetch request completes. Ideally, we want the fina ...

javascriptangularjsasynchronous

Encountering issues with styling the search bar using CSS and unable to see any changes reflected

I am currently working on creating a searchBar and customizing its CSS, but unfortunately, most of the styling properties seem to not be taking effect. So far, only changing colors seems to work as expected. .mainBar{ background-color: blue; width: ...

javascripthtmlcssreactjs

Animation Effects in Opera and Internet Explorer

Just unveiled my latest project, CSSload.net - an awesome tool for generating CSS spinners and bars. The animations are running smoothly on Firefox and Webkit browsers. Curious if anyone has tips on animating elements like this in Opera and IE? ...

jqueryajaxcssload

Combining server-side and client-side routing in AngularJS: A comprehensive guide

Currently, I am in the process of transitioning a project to an Angular-based Single Page Application (SPA). The project is originally built using node/locomotivejs and serves templates from the server side. Due to its large size, we are converting it to A ...

javascriptnode.jsangularjsrouteslocomotivejs

Send information from a web page's elements to PHP with the help of AJAX

My goal is to integrate AJAX, HTML, and PHP to create a seamless user experience. I am currently facing difficulty in passing variables to the PHP form. The method I've employed seems a bit complex, especially since this is my first attempt at using A ...

phpjavascripthtmlajax

React developers are struggling with parsing XML data with ReactDOM

While working on my React application, I encountered an issue with parsing an XML file. When I hard code the XML data in my file listener, I get the correct answer (2): const raw = `<?xml version="1.0" encoding="ISO-8859-1" ?> <?xml-stylesheet ...

javascriptreactjsreact-dom

What is the best way to specify the JSDoc types for this.field within the Mocha TestContext during the before() hook, in order to provide clarity for other it() tests as well as IntelliJ?

I am looking for IntelliJ, or a similar IDE like WebStorm or VSCode, to provide auto-complete for the fields I define in my Mocha.js before() hook within my test context. Furthermore, I want to have access to the auto-complete documentation of those fields ...

javascriptintellij-ideamocha.jsjsdoc

Is AngularJS not able to effectively manage the button type "reset"?

I currently have the following code snippet: <form name="editor"> <h2>Create/Update</h2> {{ editor.title.$error.required }} <div ng-class="{ 'has-error': editor.title.$invalid && editor.title.$dirty, &apo ...

javascriptformsangularjsvalidation

Solving the issue of image paths within external SCSS files in Nuxt.js

Trying to organize my component scss files separately from their Vue components has been a bit challenging. I also have a GLOBAL scss file that is not scoped, but no matter which approach I take, I can't seem to get the image paths in /assets or /stat ...

javascriptwebpackvue.jsnuxt.js