I have a drop down html field holding a ton of data (http://screencast.com/t/YzU4N2Y1ZGI) and What is the css div logic to style these (http://screencast.com/t/MzMyMGUyYjEt)? Any help would be greatly appreciated!
Input elements can be styled in a very limited way only - in IE usually less than in FF, but not even Firefox supports full styling of input elements.
If it's really, really important to you, you would have to look at JavaScript powered alternatives. Here's a list of 11 JQuery based SELECT dropdowns that can be styled fully.
Related
I am trying to simply style my select box so the text is centre aligned. It works in Firefox but not in Safari or Chrome. When inspecting the element in Chrome it says the text is centred, however this is not the case. Can anybody see why it is not centred in Chrome and Safari?
http://georgewoolfe.com/yogurtline1.html
It will not work. Your best best is to use a plugin. E.g select menu :http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
That actually replaces the select with a span but retains select functionality.
Well, styling tag is really hard. You have to test different browsers and OS, and hardly you will reach an uniform result.
http://bavotasan.com/2011/style-select-box-using-only-css/
I suggest you to use some alternative component or js replacement that emulate selects behaviour, if you want to style it in an easier way.
http://cssglobe.com/custom-styling-of-the-select-elements/
There's no totally cross browser way of centering the test of a <select> element using just css. Some browsers allow you to do it and some don't.
If you really have to have it centered then I would suggest that you look into using an alternative component like Select2 or Chosen.
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.
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.
Is there any way, how to make rounded HTML <select>, without using any javascript?
I have this insane design and I have absolutely no idea how to do it only with CSS.
The same problem is with checkbox and radiobutton. Does anybody know how to make them rounded?
I need solution that works for IE6+, Firefox 2+, Opera 9+ ...
alt text http://uploader.chytry.cz/select-checkbox.png
No. Form styling is very problematic, there are no guarantees that any styling will work. Simple borders and background colours/images generally work OK in most browsers. I believe Safari will let you style very little. Check this page for more detailed info.
Honestly, the best solution is to use javascript. jQuery click menu is a great solution I used recently to mimic a select box (used JS to set a value on a hidden field when an element in the menu was selected).
I'm sure there are other solutions around too if you search.
No.
Now the long answer: Internet Explorer does not lend itself well to being styled. You will be able to set a background image for the left-hand side (the text content) that has rounded corners, but the drop-down arrow will be fixed as the default browser. You'll also find that the mousedown and mouseover states for the control will be fixed as the default style.
I think that in many cases, the ideal preferred design needs to be a little pragmatic about limitations in browser standards support. Specifically, the problem that IE6 doesn't support a fair number and IE7 is only slightly more compliant.
Sorry for the bad news.
no
please see this site for radiobutton and checkbox
http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/
No, Whit out javascript or jQuery you can not do this. But if you need with jQuery try this link. It contains the HTML select box with rounded corners by jQuery.
http://webworld-develop.blogspot.com/2011/11/cool-html-5-select-with-jquery-and-css.html
I was wondering if there was a way of using HTML for the content of my ASP:Listbox items instead of plain text? The reason I ask is because I'd like to do some extra formatting on each item in the list. Not just font changes, but perhaps icons alongside the text or table rows to divide up each list item.
I'm vaguely aware that there may be a JavaScript solution to this problem, but I'm not having much luck with it, so if anyone can offer any suggestions or pointers that'd be great.
Edit: I should clarify that my target platform is .NET 2.0 and IE6.
Peter, that's very close to what I'm after. I've done this in my .NET app;
itemToAdd.Attributes.Add("style", "padding-left: 20px; background: url(" + image + ".gif) no-repeat left center;");
This works exactly as expected in FF3, but in IE the images are not displayed for some reason. Does anyone know of any issues surrounding the use of the background CSS element in IE?
there is another related stack-overflow question here:
Is there a way to enhance by CSS an HTML <select> and its <option> on IE 6?
From that it seems like you can;t set many of the css selectors for the OPTION element inside a SELECT.
You can set some things like color and background-color in IE6 but not other things like padding (that do work in certain newer browsers).
You can't format items in a listbox. You should design your own listbox.
Maybe you can create an HTML table of items. then you can format as you want.
for selection of items you can add a column with radio or checkboxes.
For ASP.NET a custom control this looks good :
JavaScript ListBox Control
You can use CSS Style attributes for the listitems.
But it looks like it is only possible in Firefox.
Edit: Tested it with IE 6 and it worked.