What causes the checkboxes to shift positions when selected in Safari?

I have encountered an issue with a set of values and checkboxes that are pre-checked on this webpage. Everything seems to be working smoothly in all browsers except for Safari. Whenever I try to click on any of the checkboxes, they seem to 'jump' or 'drop' down briefly before returning to their original position.

Despite searching extensively, I couldn't find any solutions on how to prevent this movement of the checkboxes.

The following is the code snippet related to the checkbox:

input[type="checkbox"] {
  width: 25px;
  height: 25px;
  -webkit-transform: scale(1.3, 1.3);
  display: inline-block;
  margin-right: 5px;
  border: 1px solid #0070BB;
}
<p><input type="checkbox" class="multiple" value="n" name="n" /><img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /> <span class="filterby">Nacelle<span class="counts" id="n-count"></span></span><br />

  <input type="checkbox" class="multiple" value="b" name="b" /><img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /> <span class="filterby">Blade/rotor<span class="counts" id="b-count"></span></span><br />

  <input type="checkbox" class="multiple" value="t" name="t" /><img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /> <span class="filterby">Tower<span class="counts" id="t-count"></span></span><br />

  <input type="checkbox" class="multiple" value="f" name="f" /><img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /> <span class="filterby">Foundation<span class="counts" id="f-count"></span></span><br />

  <input type="checkbox" class="multiple" value="tr" name="tr" /><img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /> <span class="filterby">Transmission/Electrical<span class="counts" id="tr-count"></span></span><br
  />

  <input type="checkbox" class="multiple" value="o" name="o" /><img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /> <span class="filterby">Offshore Services<span class="counts" id="o-count"></span></span><br />

  <input type="checkbox" class="multiple" value="p" name="p" /><img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /> <span class="filterby">Professional Services<span class="counts" id="p-count"></span></span><br
  />

  <input type="checkbox" class="multiple" value="fi" name="fi" /><img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /> <span class="filterby">Field Services<span class="counts" id="fi-count"></span></span><br />

  <input type="checkbox" class="multiple" value="r" name="r" /><img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /> <span class="filterby">Research/workforce dev<span class="counts" id="r-count"></span></span>
</p>

Is there a way to style the checkboxes so that they remain stationary and only change state when clicked?

cssformscheckboxsafari

Answer №1

The main issue here revolves around the properties of width and height. It's a mystery as to why this is causing trouble, as information on this specific problem is sparse. It appears that while transitioning between states, the width and height attributes fail to maintain their intended settings.

A possible resolution could involve the following code snippet:

input[type="checkbox"] { 
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);

  display: inline-block;
  margin-right: 5px; 
  border: 1px solid #0070BB; 
}

If needed, you may also utilize a conditional comment to address older versions of Internet Explorer and explicitly specify the height and width for achieving the desired style:

<!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Answer №2

Here is a straightforward yet effective solution:

input[type="checkbox"] {
  height: auto;
  width: auto;
}

Add the above code to your CSS file.

Answer №3

The reason the checkboxes are moving when you check them is because you've specified a custom width and height in your CSS. If you eliminate these rules, the checkboxes will stay in place.

If you're looking to make the checkboxes larger, consider exploring alternative methods of customization.

One common approach is detailed here:

Answer №4

http://jsfiddle.net/91ploewt/

input[type="radio"] { 
 width: 30px; 
    height: 30px;   
    -webkit-transform: scale(1.5);    
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
    display: inline-block;    
    margin-right: 7px; 
    border: 1px solid #0099CC; 
    } 
.matrix {
    -webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */
}
<p>
<div class="matrix"></div>    
<input type="radio" class="single" value="n" name="nt" /><img src="/images/icon/nacelle.png" alt="icon_nacelle" width="30" height="30" /> <span class="filterby">Nacelle<span class="counts" id="n-count"></span></span><br />

<input type="radio" class="single" value="b" name="bt" /><img src="/images/icon/blade.png" alt="icon_blade" width="30" height="30" /> <span class="filterby">Blade/rotor<span class="counts" id="b-count"></span></span><br />

<input type="radio" class="single" value="t" name="tt" /><img src="/images/icon/tower.png" alt="icon_tower" width="30" height="30" /> <span class="filterby">Tower<span class="counts" id="t-count"></span></span><br />

<input type="radio" class="single" value="f" name="ft" /><img src="/images/icon/foundation.png" alt="icon_foundation" width="30" height="30" /> <span class="filterby">Foundation<span class="counts" id="f-count"></span></span><br />

<input type="radio" class="single" value="tr" name="trt" /><img src="/images/icon/transmission.png" alt="icon_transmission" width="30" height="30" /> <span class="filterby">Transmission/Electrical<span class="counts" id="tr-count"></span></span><br />

<input type="radio" class="single" value="o" name="ot" /><img src="/images/icon/offshore.png" alt="icon_offshore" width="30" height="30" /> <span class="filterby">Offshore Services<span class="counts" id="o-count"></span></span><br />

<input type="radio" class="single" value="p" name="pt" /><img src="/images/icon/professional.png" alt="icon_professional" width="30" height="30" /> <span class="filterby">Professional Services<span class="counts" id="p-count"></span></span><br />

<input type="radio" class="single" value="fi" name="fit" /><img src="/images/icon/field.png" alt="icon_field" width="30" height="30" /> <span class="filterby">Field Services<span class="counts" id="fi-count"></span></span><br />

<input type="radio" class="single" value="r" name="rt" /><img src="/images/icon/research.png" alt="icon_research" width="30" height="30" /> <span class="filterby">Research/workforce dev<span class="counts" id="r-count"></span></span></p>

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

Displaying and concealing a subcomponent within a parent element for a set duration of time

I have a notification component that is displayed as a child component in the parent component after a button click. It automatically hides after a certain number of seconds. Here is the code I have developed: MyCode Parent component: <button (click)= ...

javascripthtmlcssangulartypescript

Modify the background color of checkboxes without including any text labels

I am looking to customize my checkbox. The common method I usually see for customization is as follows: input[type=checkbox] { display: none; } .my_label { display: inline-block; cursor: pointer; font-size: 13px; margin-right: 15px; ...

javascriptjqueryhtmlcsscheckbox

"Transferring a JavaScript variable to Twig: A step-by-step guide for this specific scenario

When it comes to loading a CSS file based on the user's selected theme, I encountered an issue while trying to implement this in my Symfony application using Twig templates. The code worked flawlessly on a simple HTML page, but transferring it to a Tw ...

javascriptcssajaxsymfonytwig

Enhance your website with dynamic effects by incorporating CSS3 columns and responsive layouts. Utilize CSS3 or jQuery/JavaScript to

I have decided to create a masonry style layout using CSS3 for the columns, which has made building the layout easier and more precise. This is especially useful as I am working on a responsive design. Currently, I am implementing CSS3 media queries to ad ...

jquerycssanimationtransitionmultiple-columns

Attempting to align three divs to the left, center, and right by utilizing Bootstrap CSS

I've been attempting to align three divs horizontally by floating them to the left, center, and right. Here is my code so far: HTML //to be centered div <div style="float:center"> <form> </form> <form> </ ...

htmlcsstwitter-bootstrap

When activated multiple times, Element pays no attention to jQuery

As I work on making my website responsive, I have encountered an issue with the jQuery script. When rapidly changing the window size, it seems to ignore the conditions set for elements to be displayed or hidden. The CSS is straightforward: body:after{dis ...

javascriptjqueryhtmlcsswordpress

How can I create a line-image-line in CSS that is less than 100% wide and remains responsive?

How can I create a similar design using HTML/CSS? https://i.sstatic.net/o5xzn.png Solution requirements: An icon or small image in the center. Responsive design that works with current breakpoints. The line should not span 100% width of the screen. I ...

htmlcssfrontend

The website on iPad automatically zooms in upon opening and then increases the zoom level even further when a specific button is tapped

I recently coded a website using html, css, and js. It seems to work perfectly on all devices except for the iPad. Interestingly, when I use the iPad emulator in Google Chrome, everything appears normal. However, when I open the website on an actual iPad, ...

javascripthtmlioscssipad

What is the best way to expand both the child and sub-child sections of a parent in a jQuery accordion menu at the same time when the parent is

For my website, I recently incorporated a jQuery plugin to create a dynamic multilevel accordion menu. You can view the plugin here: http://codepen.io/anon/pen/BNqvvB While I have some experience with programming, jQuery is relatively new to me. The issue ...

javascriptjqueryhtmlcss

Changing the font-family on the dropdown menu provided by Codrops seems to be difficult

Looking for help with the Tympanus Codrops Dropdown Menu - SimpleDropDownEffects. I'm having trouble changing the font-family on my website. I am using Icomoon for the icons, and while that works fine, I can't seem to properly format the text ho ...

jqueryhtmlcssiconstext-formatting

Is there a way to adjust the position of ::before elements without affecting the border placement?

I'm struggling with an element that has a CSS style ::before to display an arrow-up inside a black circle. Check out the code here The issue I'm facing is that the character \25b2 isn't centered vertically within the circle. Adjustin ...

css

Unable to create a universal <header> and <footer> to be displayed across all pages

After trying to separate the <header> and <footer> into external files, everything seemed to work fine in the console. However, when running the code, it ended up returning undefined. This is the HTML for the Footer: <footer id="footer ...

javascripthtmljquerycssbootstrap-4

Difficulty with slideToggle and other jQuery animations arises when selecting specific elements

When elements are selected from the page using the following code: $('.offers')[count - 1].slideToggle(500); The slideToggle function stops working, along with any other animations. However, this code snippet does work: $('.offers')[ ...

javascriptjqueryhtmlcss

Come up with various transition animations for multiple child elements that activate when the cursor hovers over the parent element

I have a CSS & HTML code snippet that looks like this: .item-video-kami { width: 480px; overflow: hidden; position: relative; } .item-video-kami>.play-icon.full-height>svg { width: 106px; color: #ffffff50; } .item-video-kami img { ...

htmlcss

React Native buttons are displaying at a fixed width and not adjusting as expected

Within a row, I have two buttons with a padding of 20 between them, and they are only taking up the necessary width for the button text. The width remains constant! Here is the code for the buttons: <View style={styles.buttonContainer}> &l ...

javascriptandroidcssreactjsreact-native

Issue with Jquery's Child Selector not functioning without any apparent cause

My goal is to display or hide the child class when the parent is hovered. I have multiple classes set up, similar to what is discussed in Jquery $(this) Child Selector. Unfortunately, for some mysterious reason, it is not working. This is what I currentl ...

jquerycsscss-selectorschildren

The words streaked across the page like shooting stars, leaving

On my website, I'm facing an issue with text overflowing off the page when the podcast listing page is viewed on a small screen: https://i.sstatic.net/ZAR6Z.png I stumbled upon this helpful Stack Overflow answer that suggests using a specific CSS cl ...

htmlcss

I have implemented the PUT method in my routes, however, the code is not functioning as expected

router.put('/edit-page/:id' , (req , res) => { console.log('Updating page:', req.params.id); console.log('Request body:', req.body.pageUrl); pageModel.updateOne({ pageUrl : req.params.id } , {$set : { ...

node.jsformsexpressroutesput

The <button> tag and the <a> tag have different display properties

I am in the process of creating unique custom buttons using CSS. Below is the code snippet that I have created for this purpose. Interestingly, when I apply the CSS to a <button> element, it behaves as expected. However, when I use it with an <a& ...

htmlcsstwitter-bootstrap

Is it possible to eliminate all inline styles on a parent element using a child element in CSS?

I'm currently working on an Angular project and I need to remove the styling of the parent element by using the child element, based on certain conditions. It's important to note that the parent element has inline styling. My code looks somethin ...

javascripthtmlcss