This question already has answers here:
How to align checkboxes and their labels consistently cross-browsers
(40 answers)
Closed 9 years ago.
Is there a CSS (non-javascript) way to make input fields (text/textarea/password) shown the same way cross-browsers (from IE7+ and all other common browsers (safari, chrome, firefox)) ?
There is some great code you should check out. It has a polyfill for older browsers, but it will make all of your form fields look pretty close. You can use just the CSS portion and it is still pretty awesome. It's called Formalize. It is not identical in every browser but it's pretty close.
If you are worried about pixel perfect similarity you will have to use a javascript like Select2 or Chosen since select fields are usually the elements that vary the most between browsers. You could also take a look at Twitter Bootstrap. They already have a lot of work done for you. Good luck!
Related
I have a large number of template files I am printing with Chromium. They all rely on the same CSS file. On a good number of them I need to just make everything a little smaller. If I adjust the scale in Chromes print options to 75% I get the desired result.
I need a way to get a similar result in CSS?
The only browser compatibility I need is Chrome.
This question was asked before, but wasn't really answered as the person asking the question was only using this as a workaround and found a better solution to the problem. In my case I really want to know the answer to the asked question.
Css to emulate scaling in Chrome
I have tried all the suggestions proposed in this post and none of them worked.
This question already has answers here:
Browser support for CSS Grid
(2 answers)
Closed 5 years ago.
I'm using CSS grid for my layout, and testing it in Chrome and Firefox everything works great. I have a 4 column layout with both row- and column-gaps, which at certain media query breakpoints turns into 2 columns, and later 1 column. This works like a charm. I tried testing my page on my phone, and everything seems to work, except for my grid-gaps, which is just ignored completely, and there is no gap. Then i tried testing my page in Edge, and here it seems that not a single grid property is working. Not even the basic layout of it. Any ideas why this is? I thought grid was fully supported at this point?
Edge has issues itself, not all devices universally support. Edge probably still working around. Honestly making 100% fool proof with CSS very difficult for complicated layouts in real life.
You can look at this jQuery for flawless grid on almost all devices in case your need is immediate for production purpose. jQuery projects has a basic advantage that users can report bug, test develop.
This question already has answers here:
CSS customized scroll bar in div
(20 answers)
Closed 7 years ago.
I want to customise the scroll bar.
According to this: http://webdesign.tutsplus.com/articles/quick-tip-styling-scrollbars-to-match-your-ui-design--webdesign-9430
you can do it using -webkit-scrollbar. However I cannot seem to find anywhere which browsers support this feature including caniuse.com.
Can someone please tell me where I can find out which browsers support this feature!
As it says -webkit- I assume it works on safari and chrome. But even then which "versions" of these browsers does this work on? What about andriod/ chrome mobile browsers .
Thanks!
You can for IE and Webkit browsers but Firefox would require a JS solution - and if you bother to do it in JS, it doesn't really need you to do it in CSS as well.
An example of a JS scrollbar jQuery plugin.
Edit: Mobile browser - you apparently can style these but I haven't noticed them styled at all, nor did I even know my phone had scrollbars until I just checked. This plugin seems to be able to style them.
This question already has answers here:
How to use CSS (and JavaScript?) to create a blurred, "frosted" background?
(10 answers)
Closed 9 years ago.
Is it possible to code a div to enable it to blur whatever image is under it?
something like this:
Could this be done somehow with -webkit maybe?
Not with CSS on its own, but you can pull a similar effect off with Canvas and the StackBlurforCanvas library. See this
UPDATE: Looks like backdrop-filter was recently introduced to Webkit nightly, so eventually we'll be able to do this with CSS only. Yay!
Unfortunately this can't be done purely using CSS. Although webkit-filter supports blur, it doesn't support blurring anything other than the element that it applies to.
There is a more hacky way to do this, described here - http://css-tricks.com/blurry-background-effect/
This question already has answers here:
CSS customized scroll bar in div
(20 answers)
Closed 7 years ago.
I tried searching online but I didn't find any good sources on this. Is there a way to style scroll bars with pure CSS so that it is compatible with a maximum number of browsers?
You can style scrollbars in Internet Explorer and Webkit only.
Note that these are not standard properties.
However, you can achieve this with JavaScript. One project that does this is jScrollPane.
Adding my 2 pence a little late, but if you really want to style them I would suggest trying http://jscrollpane.kelvinluck.com/. It's not a pure CSS solution like you are looking for but is a solution of sorts.