I need to set a bigger height for the option tags inside my select.
<select name="forms" id="forms">
<option value="1">Row 1</option>
<option value="1">Row 1</option>
<option value="1">Row 1</option>
</select>
I used the CSS code below for this purpose, but it did not work.
option {
padding-top:5px;
padding-bottom:5px;
}
Also I have tested this one, and again, anything happened.
option {
height:20px;
}
What is your suggestions ?
The implementation of select often uses built-in routines that are immune to CSS. This is why both methods fail on many browsers. On Firefox, they both work. The same seems to apply to any indirect methods one might try (line-height, font-size).
I could set a certain height for it using a style for the select tag:
<select name="" style="height:25px">
Related
I have some dynamically created select menus, and sometimes there were some optgroups without any options inside.
I hid them with a line of CSS code. It worked in Chrome at the time (2016), but revisiting the website I noticed it's no longer working.
optgroup:empty{display:none}
Is there a way I can tell if it was deprecated? How should I go about hiding optgroup labels if they do not have any options inside?
Both the <optgroup> tag and the :empty CSS pseudo-class are supported in all major browsers, and your code will indeed hide empty groups:
optgroup:empty {
display: none
}
<select>
<optgroup label="Filled">
<option value="one">One</option>
<option value="two">Two</option>
</optgroup>
<optgroup label="Empty"></optgroup>
</select>
However, note that when there's a space or newline inside of an element, it is not considered to be empty, as is reported by MDN:
The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments or processing instructions do not affect whether an element is considered empty.
As such, the :empty selector won't target it in the following example:
optgroup:empty {
display: none
}
<select>
<optgroup label="Filled">
<option value="one">One</option>
<option value="two">Two</option>
</optgroup>
<optgroup label="Empty">
</optgroup>
</select>
In short, to have your empty <optgroup> hidden, you need to make sure that there is absolutely no whitespace between your opening and closing <optgroup> tags.
I am working on a web-forms based project in asp.net 4.6 and using bootstrap3. I want to show all asp: drop-down items in bold.
I have form-control class applied to asp:drop down list
As commented, you can't just jam a <b> tag in there as an asp drop down item is converted to a <select> with the relevant <option>. You can however use CSS to style your <select> tags. Something like this.
select{
font-weight:bold;
}
<select>
<option>My great option 1</option>
<option>My great option 2</option>
<option>My great option 3</option>
<option>My great option 4</option>
<option>My great option 5</option>
</select>
Modify this to apply only to your specific class name, or only to the options rather than everything.
I managed to do this application wide by adding
<style type="text/css">
/*makes* the asp drop down text bolder*/
option {
font-weight:bolder !important;
}
</style>
to the site.master
I have this:
<select name="idx" id="search-field_0">
<option value="kw">Keyword</option>
<option value="su,wrdl">Subject</option>
<option value="ti">Title</option>
<option value="au,wrdl">Author</option>
<option value="pb,wrdl">Publisher</option>
<option value="pl,wrdl">Publisher location</option>
<option value="nb">ISBN</option>
<option value="bc">Barcode</option>
</select>
I want to change its highlight background to green. How will I do this , without converting my
tag to any form.Any idea?
I'm not sure you can really change this with pure css. this is browser / operating system defined colors. You can do something a little hackier and make a custom dropdown using divs. or maybe you can find some javascript library to handle this..
I doubt there is something for the option highlight you're specifically asking for.
Turns out there are multiple questions like this all over SO, although here is a good explanation by this one:
Well you cannot change the hover color of select option as it is rendered by Operating System instead of HTML
I'm trying to create a print stylesheet for a web form that users fill out by hand and then copy to the web version. Unfortunately, I can't figure out how to print my select list options. It only prints whichever option is currently selected.
Is it possible with CSS (JavaScript isn't an option) to extract the content from the select options and place them in a parent element? I'm thinking something like this:
HTML:
<div id="parentDiv">
<select>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
and CSS:
#media print{
#parentDiv:before {
content: child.attr(value);
}
}
That's obviously not correct, but is there a way to actually do this? Or any other JavaScript-free way to print out the options?
NOTE: The page is dynamically rendered, and I am not able to render additional "hidden" <div> elements to unhide in the print css, so that solution won't work for me.
THANKS!
I added a css class to options in a select dropdown box for indention,
<select id="users" name="users">
<option value="[1,2,3]">Devs team</option>
<option value="1" class="member">user1</option>
<option value="2" class="member">user2</option>
<option value="3" class="member">user3</option>
</select>
It shows correctly on Firefox but not on Chrome. :(
Hope you guys could help me with this little problem.
You cannot reliably style select and option elements. Browsers typically like to stick to the OS defaults for these elements.
If you are looking to pad .member because they are children of the Devs Team, you may want to look at the OPTGROUP tag: http://www.w3schools.com/tags/tag_optgroup.asp
Found the answer. Sadly chrome doesn't support giving styles to option.