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.
Related
A select drop down in my angular 2 app doesn't show my images associated to options, though the images are working when I isolate from select drop down. Some CSS is overwriting my images in select - I can load image but can't display it. Here's my code:
<form>
<select [(ngModel)]="ddselectedStatus" name="statusselect" style="width:320px;" (ngModelChange)="onStatusChange($event)" class="col-xs-8 form-control">
<option value="">--Select Status--</option>
<option [ngValue]="i" *ngFor="let i of myOptions">
<img src="images/opened.png" class="rowindic"/>
{{i.name}}
</option>
</select>
</form>
its just a matter of CSS. This should help but keep in mind other CSS may also interrupt,
<img [style.width.px]="50" [style.height.px]="50"
[src]="images/opened.png" class="rowindic" />
I'm having a graphical problem with a select box in a page of my website.
The problem is that the option elements of the select is showing inline instead as a drop-down selection. This strange behaviour becomes only if I render the select element inside a form element. (??I don't know why??)
The HTML output produces:
<form name="add-user-form" method="POST" action="/index.php/admin/happen/add"><p><select name="day" required><option value>d</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</p>
</form>
is a valid html5 markup, checked on w3c website.
this is an image showing the problem..
I omit the php code for now, somebody know this problem?
As we said in the comment, the issue is due to a CSS class using the following :
form[name] * {
display: inline-block;
}
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 am trying to create a alternative style to the select list on mobile. What I want is use my own styled button to activate the select list options. On iPhone and Android this gives you a popup with the options. I got this working by applying the button styles to the label for the select element. However, I am unable to properly hide the select element from view without also disabling its functionality. Does anyone know how to do this?
My html looks like this:
<label class="button-sort">
<select>
<option>Option 1</option>
<option>Option 1</option>
</select>
</label>