Geek Answers Handbook

How to put checkboxes and dropdowns in a div for scaling in safari

I have a div containing some elements. I want the div to scale when it freezes. It works fine in chrome, but something strange happens in safari. Check boxes and drop-down lists are also scalable. How can I fix this in safari?

.box:hover { transform: scale(1.03); -ms-transform: scale(1.03); -webkit-transform: scale(1.03); -webkit-transition: all .01s ease-in-out; transition: all .01s ease-in-out; } div { padding-left: 30px; margin: 10px; } .box { border: 1px solid black; } 
 <div class="box"> <div> <input type="checkbox" name="opt1" id="option1" /> hello </div> <div> <select> <option>apple</option> <option>orange</option> </select> </div> <div> <input type="text" placeholder="enter something" /> </div> </div>
+7
html css safari css3 css-transforms
source share
5 answers

This is not a problem with the browser, the scale scale property works the way it should work, it scales each nested element to 1.03 inside the .box element.

The only thing you have is to use backscaling for child elements 1 / 1.03 = 0.97

 .box:hover { transform: scale(1.03); -ms-transform: scale(1.03); -webkit-transform: scale(1.03); -webkit-transition: all .01s ease-in-out; transition: all .01s ease-in-out; } div { padding-left: 30px; margin: 10px; } .box:hover *{ transform: scale(0.97); -ms-transform: scale(0.97); -webkit-transform: scale(0.97); -webkit-transition: all .01s ease-in-out; transition: all .01s ease-in-out; } .box { border: 1px solid black; } 
 <div class="box"> <div> <input type="checkbox" name="opt1" id="option1" /> hello </div> <div> <select> <option>apple</option> <option>orange</option> </select> </div> <div> <input type="text" placeholder="enter something" /> </div> </div>

A source

+8
source share

Another solution would be to move the scale effect to a pseudo-element that behaves exactly like your main div .box . This pseudo-element will adapt the height and width of this div.

The advantage of this solution would be that the contents of your div .box would no longer be affected by the scale, since the scale would not be on that div. In addition, you do not need to change anything in your HTML structure.

 div { padding-left: 30px; margin: 10px; } .box { position: relative; padding: 10px; } .box:after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1); border: 1px solid black; transition: 0.3s; z-index: -1; } .box:hover:after { transform: translate(-50%, -50%) scale(1.03); } 
 <div class="box"> <div> <input type="checkbox" name="opt1" id="option1" /> hello </div> <div> <select> <option>apple</option> <option>orange</option> </select> </div> <div> <input type="text" placeholder="enter something" /> </div> </div>
+1
source share

You can add this to your css on the checkboxes:

 -webkit-transform:scale(3, 3);
0
source share

 div { padding-left: 30px; margin: 10px; } .box { position: relative; padding: 10px; } .box:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform:scale(1); border: 1px solid black; transition: 0.3s; } .box:hover:after { transform:scale(1.03); } 
 <div class="box"> <div> <input type="checkbox" name="opt1" id="option1" /> hello </div> <div> <select> <option>apple</option> <option>orange</option> </select> </div> <div> <input type="text" placeholder="enter something" /> </div> </div>

I removed the transform property from @SvenL's answer. without it, too, his working fine in safari.

0
source share

Yes, only with HTML, only CSS, you cannot adhere to a different style for Safari, Chrome and Opera, since all three use the same -webkit flag for styling using css

therefore possible solutions - Detecting the browser using javascript and adding a class to the body to indicate the browser

Eg. if you want to stylize a safari, you will stylize

.safari.box: hover {

  /* style as you need */

}

below is the test code that was running.

 <html> <head> <title>TVEK Test App for srk</title> </head> <body> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script type="text/javascript"> $(function () { var userAgent = navigator.userAgent.toLowerCase(); if (userAgent .indexOf('safari')!=-1){ if(userAgent .indexOf('chrome') > -1){ //browser is chrome alert('chrome'); }else if((userAgent .indexOf('opera') > -1)||(userAgent .indexOf('opr') > -1)){ //browser is opera alert('opera'); }else{ //browser is safari, add css alert('safari'); $("body").addClass("safari"); } } }); </script> <style type="text/css"> .safari .box{ /* add your required style here */ margin:20px; } .box:hover { transform: scale(1.03); -ms-transform: scale(1.03); -webkit-transform: scale(1.03); -webkit-transition: all .01s ease-in-out; transition: all .01s ease-in-out; } div { padding-left: 30px; margin: 10px; } .box { border: 1px solid black; } </style> <div class="box"> <div> <input type="checkbox" name="opt1" id="option1" /> hello </div> <div> <select> <option>apple</option> <option>orange</option> </select> </div> <div> <input type="text" placeholder="enter something" /> </div> </div> </body> </html>

Please thank the reward if my decision is helpful.

You can remove the warning if necessary. I just added a warning to show you evidence of evidence.

0
source share

More articles:


All Articles