I have a small problem with an HTML select:
<select>
<option>...</option>
<option>...</option>
<option>...</option>
</select>
By default all the options will be shown underneath the select field and I can't seem to change their direction. What I need is to show up over the select field instead of underneath.
How would that be possible?
That's pretty much impossible (without custom JavaScript-based elements) since select and option are elements built-in to the OS and browser.
One way to think about it: all drop-down menus are styled so that all listings are below the field. If you make yours different, some people may be confused, and that's not a good thing.
It's not possible dude, sory... I have done the research for you but nothing appears to be a solution to your problem...
Seeing it the good way, you might be the one that comes up with the JavaScript code for this and post the solution on your own question, and answer the question for future users that need the same stuff
Keep moving and you'll get it. Good luck
You could try to use this in your CSS:
direction: rtl;
You can do it inline for your select or give it a class/id. I was able to reverse the direction of my select menu by using this. I had to change some of the styles though because it pushed my text to the right a bunch. See this answer.
Hope that helps!
Related
I'd like for all the options in a select menu to be centered, however I can't find a way of doing it.
After a quick google I couldn't find any real solutions, however most of the entries are quite old, so I'm wondering if there have been any improvements made to css to make this possible.
The closest I've found is to use text indentation, which may well work for the options that are the same length, but for any options of varying lengths it of course looks off.
You might be interested in using ul and li instead of a traditional select and option.
Bootstrap has a component that lets you do this: Single button dropdowns.
You can use their component and add a style similar to this:
ul.btn-dropdown li {
text-align: center;
}
You can get a result like this:
HTML/CSS doesn't provide for formatting Option elements within Select lists - only for formatting the whole Select list.
You could try padding with spaces but, realistically, I'd concentrate on more important issues and let Select lists be Select lists.
(JQuery may have something to offer, but I do straight Javascript so am not familiar enough to know).
Tony Duffill
First off, I went and looked at the responses generated for answers when asking this question. Didn't find anything similar. I'm just dealing with a weird quirk in my code pen. A result I was not expecting.
The easiest way to explain is to simply link to my code pen.
Code Pen: CSS3 Expandable Search Form
I have the same css code applied to two different types of inputs. One is a search input and the other a text input. In order to get similar results from each i have to modify the amount that the transition opens up to in width on the text input and set it to 95% instead of 100%.
My goal was to have each using the same transition code with similar transition effect. But it's not working. I would be very appreciative to anyone who takes a look at it and may be able to help me. Thanks. BTW I am a newbie to both stack overflow and code pen. I'm sorry if I do anything wrong. lol I did try and look for an answer.
I tried posting code here, but I must be doing something wrong. Everything is in code pen though.
Now have a look at your Code Pen. I have assigned class to every one.
http://codepen.io/anon/pen/AlcHr
I hope you wanted to achieve this.
Your search bar is using a different box model
box-sizing: border-box;
Apply that to the rest of your fields and they will behave the same.
The search field has a style applied by the browser of box-sizing: border-box;
Apply this to your other fields and they should behave the same.
Updated Pen
It is very easy with links and images. One could just specify title="Something" to get a nice tooltip over an element. But somehow I don't see any convenient way to do the same to a button. Seems like HTML itself miss this option at the first place.
But maybe there is at least a handy workaround for that?
Jesse Gumm from nitrogenweb googlegroup shared a nice way to do this
#button{text="Submit",postback=whatever,actions="obj('me').title=\"Some title\""}
is there a way to make the select options like the above? how to remove the default img in the select options? thank you.
http://tutorialzine.com/2010/11/better-select-jquery-css3/
This is a really good tutorial from a reliable site :)
I'm aware it uses jQuery but also makes use of CSS3
This is a good question! Ive been searching for the solution for this along time. My belief is that, this is the bestest solution:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
You use it with jQuery UI and fully edit with css. However even more better solution would be making fully div and li based dropdown-menu with a hidden input, if you want to use it in a form.
Is it possible to remove the blue "v" icon on a html thing?
Or how can I make it disappear? Or can I change it?
If I want to remove it what are my options?
<select> is not styled by CSS, it's styled by the operating system. You can make it look the way you want by using an CSS+HTML+JavaScript replacement, but that requires a plug-in or a bit of code.
You can use Uniform to replace your <select> elements with themable JavaScript-based equivalents. Uniform is nice because it degrades gracefully to your original <select> box in the absence of JavaScript.
I use this jQuery/CSS plugin to style select boxes: http://www.adamcoulombe.info/lab/jquery/select-box/
The only way to have a be styled exactly as you want is to not use ...
Google 'custom select box' and you'll find a bunch of alternatives (some of the mentioned by others here)
Like pointed by #Diodeus, it's impossible to change <select> appearance using CSS.
But you always can hope in jQuery. I suggest you to try the selectBox, a jQuery plugin with does auto select replacement. Very easy and very powerfull.