This question already has answers here:
Is it possible to center text in select box?
(23 answers)
Closed 7 years ago.
I have a select element in my HTML form and by default, the text is aligned left. text-align: center; does not center it like a text input.
From other answers on Stack Overflow, some users say to use the text-indent property but though it moves the text, it isn't good for aligning different lengths of text.
Though a CSS would be best, a javascript/jQuery solution would be okay.
So finally, how do I go about centering the text in a form select element?
HTML Code:
<select name="country">
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
HTML:
<select name="country">
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
CSS:
select {
height: 37px;
padding: 0 20px 0 20px;
}
jsfiddle
if you do not want to pad the eliment you could always use a Javascript-based extension which typically uses <div> elements instead of an actual <select> element and allows you to easily style it.
https://formstone.it/components/dropdown/#options
Related
This question already has answers here:
Changing the background colour of an active input selector
(2 answers)
Closed 4 years ago.
I am creating a contact form and want to make it more barrier friendly by highlighting the background of a selected item while tabbing through them with keyboard.
Here is a fiddle to help explain.
When clicking in the first box and then hitting tab, the dropdown menu is selected and should change its background-color to indicate its selection.
(Note: not affecting the dropdown options)
How do I change the correct part of the element when its selected via tabulator?
<html>
<body>
<div class="textarea1">
<textarea rows="1" cols="20">
</textarea>
</div>
<div class="dropdown">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="textarea2">
<textarea rows="1" cols="20">
</textarea>
</div>
</body>
</html>
I have edited the jsfiddle link
https://jsfiddle.net/srg8o0v4/
You just need to add :focus selector for all your form elements as above in textarea and select.
textarea:focus, select:focus { background-color: yellow; }
This question already has answers here:
How to style the <option> with only CSS?
(3 answers)
Closed 7 years ago.
I am trying to style only part (word/letters) of a choice list option similar to this:
This is text containing <span style="color:red;">Colored</span> Text.
The example above works just fine. However if I try to do anything simmilar into <select> element, it doesn't render the span tag at all.
<select>
<option value="volvo">Volvo</option>
<option value="alfaromeo"><span style="color:red">Alfa</span> Romeo</option>
</select>
Also you can specify style within the option tag, but this affects the whole choice, rather than a just part of it.
To sum it up, is there any good way to do this apart from making your own HTML element that looks like a select?
DEMO
You can't style your option tags. You can use libraries like Select 2 that hide your original select and create a new one, which can be stilized.
This code works for me. Not sure how backwards compatible this code is with older browsers, but this was tested with Chrome.
<style type="text/css">
select.picker {
font-size: 2.4em;
}
select.picker option {
color: green;
}
select.picker option:first-child {
color: blue;
}
</style>
and here is the markup
<select class="picker">
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c">Option C</option>
</select>
Evidence...
Happy Coding!
Styling selects is a bore. Try this option that mimics a select box with some CSS and jQuery:
https://github.com/octopuscreative/FancySelect
This question already has answers here:
Get selected text from a drop-down list (select box) using jQuery
(35 answers)
Closed 8 years ago.
I have a select code with two option. Is there a way I can use jQuery to alert me the text within the option tag of the option I have selected? Currently I have option two selected so when I use the code below it comes back as "5". I need it to come back as "Option 2".
alert (jQuery('#bw_status').val());
The code below is the example code I am using.
<select id="bw_status">
<option value="7">Option 1</option>
<option value="5">Option 2</option>
</select>
Yes, try this:
jQuery('#bw_status option:selected').text()
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Selecting an option by its text
Is there any way how to choose the option in selectbox by the text label of the option (not the value)?
<select id="form-mySelect" name="number">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
$("#form-mySelect").val("One");
The example above doesn't work in jQuery 1.4.3. I've read somewhere, that in some lower version of jQuery selecting option by >text label< (not by the value) works.
Is there any way, how to simulate this behavior and make it functional in jQuery 1.4.3?
You can use $('#form-mySelect").html() to get the label contents. So you could loop all options and compare the html() value with one given and then select the option.
This question already has answers here:
How to style the <option> with only CSS?
(3 answers)
Is it possible to css style select option on dropdown? [duplicate]
(1 answer)
Closed 3 years ago.
Previously, I am using
<select size="8">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
<option>Item 6</option>
<option>Item 7</option>
<option>Item 8</option>
<option>Item 9</option>
</select>
provide a JList box liked place, to hold a collections of item, to let user have a simple view to browse about items.
However, the look of this kind of pure HTML element doesn't look shinning.
Have anyone of you come across any similar widget/ JavaScript library/ CSS template ...
which will make this List Box look great?
Thanks
p/s List Box is something look like this
(source: sun.com)
Style it with CSS. Here's an example.
Here's another with more "WOW"
Some places to turn for inspiration:
Pattern Tap
Open Source Web Design
CSS Zen Garden
Google for "Jquery SelectBox ", you may get some results.
Here is one, which you can use as an enhancement of select box
http://www.brainfault.com/2007/07/23/select-box-replacement/
Thanks.
Have a look at jqtransform for a complete form redesign ..