I want to style form elements but im finding I cant do everything I want with CSS as sometimes the browsers ignore the styles. jQuery Mobile seems to get around this by creating new divs and spans around form elements. I dont want to use the entire jQuery Mobile library and I dont believe its possible to just use this behavior from it. Are their any other frameworks / methods that standardize form elements cross device and allow you to style them how you want? Thanks
Related
I am looking for a user friendly way to:
Indicate a table is too wide, and thus scrollable, even when the bottom scrollbar is not visible yet
Allow the user to scroll this table easily, also on mobile
It does not need IE support :)
I found this jquery plugin, which seems to handle that fine:
https://www.jqueryscript.net/table/Mobile-friendly-Scrollable-Table-Plugin-For-jQuery-ScrolTable.html
I would prefer a pure CSS or TS/angular solution, as I would rather not incorporate jQuery when not needed.
Are there any, more modern alternatives? Is there a standard UX approach that I missed?
I'm writing JS plugin which will be placed in several different websites. Those websites are using different styling, some Bootstrap, some Bulma and some just custom styles.
My plugin is generating DOM elements like divs, inputs, selects. I want to style those elements on my own. How to make this plugin look the same in any website which it will be embed?
Maybe creating Shadow DOM elements would help. Then you will be able to add your custom DOM elements and they will not be affected by whatever is outside. See here: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
I'm very new to this and don't know how to use javascript or jquery and would prefer to avoid using it in all possible cases as I know it's not compatible in all browsers, takes time to load and can be disabled by users.
I've already made and designed the menu but would like the main heading in the menu to change to the submenu link when clicked on whilst keeping the rest of the menu in tact. How do I achieve this in css?
You can take a look at http://davidwalsh.name/css-target and use the css target selector (But it's not supported in IE - I haven't checked IE10 though).
but-
If you want to change the text or href attribute then, it's not possible in pure css (correct me if I'm wrong). You would have to use javascript. Jquery makes it easier to make your site support most used browsers, why not give it a go? I am certain if you get stuck, people on Stack overflow would gladly help you.
on a sidenote, css can also be disabled by the user (and not all browsers support all css features). Css and Javascript are in the same boat, because the browser dictates what is supported.
I am developing a web application and want to block selection of any text on the web page for the user. Personally I do not like add any Javascript for this. Is it doable using CSS only?
Thanks in advance.
I believe there are css3 rules (e.g. the user-select property) but at the time of writing they are not supported in all browsers. If you're looking for tricks, here is one:
Create an overlay DIV that is same size as the disabled DIV and place it over the disabled DIV using CSS positioning. You can use simple CSS or fall back to JavaScript if you have problems in calculating width, height or position. This could be annoying for the user by the way.
demo here
Note: I've tried searching on google, but couldn't find what I was looking for.
Browsers have some default styles they use for rendering form elements, which is different from browser to browser. Is there a way to reset all of the native browser styles for form elements like select, radios, checkbox etc, to make a consistent look across browsers?
I've made a quick example:
form elements http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png
As can see the form elements are rendered slightly differently. What I would like, is some styles, that can reset them, to look alike, for IE, Firefox and Webkit.
So how do you do this? A link to a css stylesheet with all the needed styles would be fantastic.
Short answer: you can't.
Long answer: you can, but expect pain.
I've hacked together nice looking Radio buttons, Checkboxes and Selects with 'sleight of hand' javascript + css. Basically, just after an input is loaded I hide it and replace it with labels / divs with events bound to them to make them act like they're the right inputs, and css to make them look that way. The events also update the underlying input so that the correct values are submitted with the rest of the form. If my script barfs or JS is off, the user gets the normal controls.
It wasn't that fun but the result is passable.
I do not look forward to seeing the mess IE makes of it though :)
I had inspiration from:
http://sourceforge.net/projects/selectreplace/?showfeed=code
This is an old question now but adding the CSS rule -webkit-appearance:none may help remove default Webkit styling, e.g. pill shaped buttons on Mobile Safari.