I can not for the live of me figure out why the below code has a black rectangle in it, as far as I can tell its something left behind by the hidden option, but I've got no idea how to hide it or change its color.
What is this and how do we manipulate it?
<div>
<select>
<option hidden>Select flow slides</option>
</select>
</div>
Here is a codepen link where you can see this happen: https://codepen.io/Nick09/pen/NWGmJGy
And a link with the mystery rectangle that appears when clicking the select element: https://imgur.com/9rdbXkS
More image examples: https://imgur.com/a/MhYNPy8
Update: After someone in the comments suggested something I figured out that the problem is much simpler than I first thought. Mainly, whenever you click on a select without any options, you get this little black dropdown: https://imgur.com/ZfFn5DN.
Use style attribute to hide the entire option.
<option style="display:none">Select flow slides</option>
Or use disabled attribute to disable the option (remove hidden attribute)
<option disabled>Select flow slides</option>
So after some time invested in this and quite a bit of help from the community I've managed to come up with a fix.
Since the problem boils down to: on some machines it seems (managed to replicate it on someone else's PC/Windows) that a select element without any options will produce a black drop down on mouse down.
And you need a select element with no options because of different reasons, in my case it was because I was later removing what was inside of the aforementioned select element in order to add a custom drop down.
Then all you need to do is add a event listener that listens for a onmousedown event and do e.preventDefault() on it so that the default drop down list does not open at all.
Tested on all browsers with no issues!
End result: https://imgur.com/moYaFkO
Thank you for your suggestions guys!
Related
I'm using bootstrap 3 and am trying to imitate jQueryMobile's select option where you can replace the standard select textbar and arrows with just a button which toggles the opening of said select.
I don't want to use dropdowns either because they get hidden inside my nested divs (if you can make them appear at the topmost layer, then that's fine too).
So I'm wondering if there's a way to have a button as a stand-in for opening the select options.
Not totally sure on this, need a little more information. But you can create a button with:
<button type="button" onclick="alert('Message')">Button</button>
if that what you wanted?
This isn't exactly what you asked for but I did a search and found this plugin and I think if you were to experiment with this then you could come up with the desired effect. Give it a look over.
Theres a spot about a 1/3 of the way down the page which I think would help you decide if this would work.
Plugin: Bootstrap-Select
I need an off/on indicator for a panel in my Swing application.
My gut reaction is to try to use a JCheckbox, and somehow disable the mouse input and change the checkbox state only through my program. But a radio button would look better.
Is this the best way to do so (& if so, how to disable mouse input w/o making the control look disabled), or is there a better indicator element?
Yep, why not. Just use setEnabled() method (JPanel inherits it, so don't worry).
Use check box but change the icon to look like following round button ( which is a check box BTW )
Is there a a way to hide the arrow in a standard dropdown select fieldset?
Fiddle link
I have an autocomplete system where you fill in the organisation number of a company and it finds the info based on a database. I'd like to have the select box, but without the arrow..
I need it to do this as it's a double function form, either you can fill in your ORG nr or just manually type it in, pretty simple, probably used all over the internet.
Thanks :)
Kyle,
Usually autocomplete systems use input text elements instead of a select element. This creates what you are trying to achieve. Google is a classic example of this.
If you want, you can take a look at jQuery's autocomplete plugin to get another example and some code ideas, or whatever. http://docs.jquery.com/Plugins/Autocomplete
It's not easy, but you can fake it by putting a button above a Select that has its size property set to a value greater than 0.
Have the Select hidden and positioned absolutely under the button. Clicking the button shows the list. Selecting the list changes the text on the button and re-hides the Select.
This way you need a text box, because you cannot type anything in <select> tag.
And put an onclick event to this box to open autocomplete with all possible values.
alt text http://www.freeimagehosting.net/image.php?a55fa98f01.jpgHi I am trying to use a HTML select box with 'multiple' select options and size to 1 as below
`
<SELECT NAME="toppings" MULTIPLE SIZE=5>
<OPTION VALUE="mushrooms">mushrooms
<OPTION VALUE="greenpeppers">green peppers
</SELECT>
When the size is set to 1 small scrollbar appears which makes the page clumsy.If I increase the size its eating up my page since there are around 20 such multiple boxes in and around the page. I am looking for a solution which looks like <SELECT> but should function as multiple
Is this possible. I remember seen something similar but don't remember exactly.
Any ideas
I had uploaded the imageSample http://www.freeimagehosting.net/image.php?a55fa98f01.jpg
Check out this code... it turns your multi-row select into a dropdown with checkboxes using jQuery.
code.google.com/p/dropdown-check-list
I'm going to go in bit of a different direction with this one:
You really, really need to rethink your design if you need to do what you are doing here. You might also want to pick up a book on HTML; and interface design in general.
When things look a certain way, that gives people certain expectations: A single-select should always look like a single-select, and a multiple-select should never look like a single-select.
You can't get a multiple select to display as a regular select. If you could, how would you expect the user to select multiple values ?
That being said, the solution would be to create your own custom solution or use one of the jquery plugin out there.
You can't hide the scroll bar in a multi-select... otherwise it would look like a text-area and may confuse a user. If you really want to hide it, make a div and float it over the area of the scrollbar to simulate hiding it. I don't recommend it but its a possibility.
Is there a way to capture the events triggered on HTML controls before they are forwarded for default (generic) handling by the control itself. In my case, I want to prevent a element dropdown to open when a user clicks on the control. e.g. On this user click, OnClick() event gets fired and is handled by the default control which open the dropdown. I want to stop this from happening.
Can I attach a custom function to this event and redirect the event handling to this one instead of the default code that opens the dropdown?
Thanks
onclick,onmousedown and onmouseup will not help you to prevent the selectbox from opening. I'm not asking why you want to do that, but if you really can't use any other solution, like for example (changing selectbox to the readonly inputbox), then, you can try the next solution.
One way to prevent the box from opening, is to create an overlay container, which will block the the focusable area of the select. This can be achived by placing the div after the selectbox and givving it the sizes and the position of the selectbox.
<div style="position:relative;">
<select style="width:100px;height:30px">
<option>hello</option>
</select>
<div style="position:absolute;
left:0;
top:0;
width:100px;
height:30px;
z-index:2;
background-color:black;
opacity:0;filter:Alpha(Opacity='0');"
></div>
</div>
Event then, it will work only for IE >= 7. Not for IE6, cause selectboxes in IE6 are strange( maybe you can try to fix IE6 with some iframe hack);
Fairly old question with some good suggestions, but none seem to directly answer the original question. In case anybody out there is wondering, I believe the OP was wanting to keep the visual appearance of the system/browser select element, but use his own custom drop-down menu instead of the system/browser drop-down menu.
In this case, the onclick event will occur too late for you to stop the actual drop-down menu from displaying. What you want to do is bind to the mousedown event, and prevent the event from propagating to the default behavior:
document.getElementById('my_select_id').onmousedown = function(event) {
// ... do something here...perhaps display your own custom menu, an advanced selection chooser, focus another element, display a message, or some other custom handling.
event.preventDefault(); // This prevents the drop-down menu from displaying
}
Notes:
Replacing the drop-down with a custom-designed element (as suggested by others) isn't always an option. In some cases, you'll end up either having to completely omit default/system drop-downs from your site (in favor of a custom-designed element), or you have to live with a mismatch in visual appearance due to browser/system/theme differences (unless you feel like designing the custom element to match every conceivable visual aesthetic/theme.)
Disabling the drop-down will not work, as it will prevent the event handlers from firing.
Using optgroups will still allow the drop-down menu to be displayed.
Replacing the drop-down with an empty version will still display an empty drop-down menu.
This is the answer I gave on another, similar question.
This works great for me in IE and Chrome, there's no flicker or anything:
html
<select id="MySelect"><option>Hello</option></select>
js
MySelect.onmousedown = function ()
{
window.setTimeout(function ()
{
//- An immediate blur, then refocus stops the options from being displayed
this.blur();
this.focus();
//- so now we run our custom function
runOtherFunctionInstead();
},0);
}
Make sure the js runs after the select element has been parse by placing it in an onload or ondocumentready or a script block after the select element. Haven't tried it in Firefox or Opera. Assumedly it would work in Safari, though.
EDIT
As suggested in the comments, the popup will still appear for a double click in IE (all versions). This is due to a bug where the mousedown event doesn't fire for the second click (whoops). You can quickly hide the options again by using the blur, focus method in the ondblclick event and if this method works in Firefox and Safari, I still think it's the best solution considering most people don't double click select boxes.
you need to set selectbox to be onload disabled: disabled="disabled"