guys could you please help me with this. I'm using chosen.js and have a problem with dropdowns, please see the picture problem with dropdowns
This is the html code
<select id="SelectedInterval" class="chosen_select" name="SelectedInterval">
<option value="3m">3 months</option>
<option value="6m">6 months</option>
<option value="9m" selected="selected">9 months</option>
<option value="1y">1 year</option>
<option value="2y">2 years</option>
</select>
And I'm using standard chosen.css
Figured out how to fix this thanks to: enter link description here
The key think is that "It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts."
So I put my dive to have bigger z index than the div below
Related
I want to hide one of the dropdown options from a form I'm using. I want to keep the element in the form, as the form is doing some calculations based on user inputs and if I take out the option from the form it breaks the calculation, so I'd just like to hide it from users so it's still in the form but not visible to users.
I have inspected the area on the form and this is the code. I want to hide the word Liverpool.
<select class="iphorm-element-select iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
<option value="Liverpool">Liverpool</option>
<option value="Shrewsbury">Shrewsbury</option>
</select>
If you are working in an environment that supports HTML5, you can use the hidden attribute on the option to hide it.
Note that in order for that to work, it can't be the first option (otherwise it will default to that one).
See this working snippet:
<select class="iphorm-element-select iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
<option value="-">Choose an option</option>
<option value="Liverpool" hidden>Liverpool</option>
<option value="Shrewsbury">Shrewsbury</option>
</select>
Following OP Comment About Editing Existing HTML
OP has stated:
The issue I will probably face is that the html is generated by a
plugin that creates the form, so I can't add that attribute. I was
hoping to add a css rule to stop it displaying
Given this circumstance, the CSS property visibility could be used to control whether the option is visible, as per the following snippet:
select > option:nth-of-type(2) {
visibility: hidden;
}
<select class="iphorm-element-select iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
<option value="-">Choose an option</option>
<option value="Liverpool">Liverpool</option>
<option value="Shrewsbury">Shrewsbury</option>
</select>
However, this has the unfortunate side-effect of leaving a hole in the select list as opposed to hiding it completely. It does, however, prevent that option from being displayed or chosen.
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!
Only using CSS, is there a way to determine if a select box is dropped down or closed?
I know that there are pseudo classes such as :checked and :indeterminate, but I haven't seen one that will work in conjunction with the select element the way I want.
Here's an example of my select box - with an id of "field-action" :
<select id="field-action" name="" class=" " data-validation-required="true">
<option value="" selected="selected">—</option>
<option value="1" id="field-action-lock">Lock</option>
<option value="2" id="field-action-unlock">Unlock</option>
<option value="3" id="field-action-pin">Pin</option>
<option value="4" id="field-action-unpin">Unpin</option>
<option value="5" id="field-action-delete">Delete</option>
<option value="6" id="field-action-undelete">Undelete</option>
<option value="7" id="field-action-move">Move</option>
<option value="8" id="field-action-merge">Merge</option>
<option value="9" id="field-action-spam">Spam</option>
<option value="10" id="field-action-notspam">Not Spam</option>
</select>
The goal - using pure CSS or SASS - is to determine if the select list is dropped down, and if so, give it a bottom margin of about 50px. When the box is dropped, it overlays some content that cannot be covered under any circumstances.
Any input is appreciated - thanks!
SELECT elements are not rendered using HTML, they are part of the browser/operating system. When opened they do not take up any space within the DOM, therefore CSS cannot detect this.
Although this appears to be the only way to manipulate the select box via CSS, it is not acceptable as tabbing into the select box triggers the focus but does open the select box. The user must click to open it.
Why not :focus?
select:focus {
}
Fiddle: http://jsfiddle.net/ewqSA/
There might be an alternative way of showing your options. Instead of a drop down list, you could use a select list like is in this jsfiddle http://jsfiddle.net/cSSjF/ linked in this answer https://stackoverflow.com/a/8788381/1804496
<select size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
This still allows only one option to be selected, and lets you control how many options you want to be visible. I'm assuming you could show just enough options that your important content isn't pushed off the viewable area.
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.