How to create a dropdown with lu and li tags like this


Tags: javascript,jquery,html,css,dropdownbox

Problem :

This dropdown in the screenshot is created by ul and li tags. I just know how to create the dropdown box but I am not sure how to create this scroll bar. I feel I can do something like create a absolute position div as the scroll bar, and it's size and position should be calculated. These things should have no problem.

My real question is about the css. How to make the li tags can be display inside the ul tag. In this screenshot, we can see the ul can have a absolute position and a high value of z-index so that it can display on top of everything else. But how does the ul tag's border can cover the li tags.... I really don't know how to style it like this.... And also not sure what kind of code should I write to make it moving with the scroll bar. I don't need the calculation. Thank you so much.

enter image description here



Solution :

HTML

<input type="text" />
<ul>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
</ul>

CSS

input {
    width: 200px;
}
input:focus ~ ul {
    display: block;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
    border: 1px solid silver;
    height: 150px; /*required for scrolling */
    overflow: auto; /*required for scrolling */
    display: none;
}
ul li:hover {
    background: gainsboro;
}

FIDDLE

Though if you want the list to appear when focused on the input box, I'd suggest using JS for that. In the example, you can't scroll by clicking on the scroll bar and moving it up and down, because the input box loses focus, and the list appears only when the focus is on the input box. But you can scroll with the mouse wheel.


    CSS Howto..

    How to fade text out vertically, similar to Amazon's product descriptions

    How to make a simple plus one voting system in code igniter

    how to fit the original text format of a paragraph into the html paragraph element using jquery?

    How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

    How to convert columns to rows using CSS

    How to make sure my css overlay is on top at any site?

    How do I get the ID of a JQuery item mid-function?

    How to get css3 ribbon on both sides of element

    How can I make a rounded image with a label in it?

    when click on button then show message

    how do I make overflowing and float positioned elements stay all on one line?

    CSS - How to set margin-left dynamically with a fixed value

    In CSS, how to create automatic section numbering only when there are multiple sections?

    CSS: How to center texts with transitioning position?

    How can I have a responsive height with absolutley position child elements

    How to check css in unit test

    How to make my words not go under my picture in css

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    Mini-map of HTML page sections shown as fixed anchors in viewport

    How to style nested ID-elements in CSS/SASS

    How to display contents of several div tags in a same line

    How to make the gif photo to be same width as the table?

    How to use jQuery to horizontally center an object in the viewport?

    how to change the colour property of tag used for a text

    How to move Woocommerce Description tab below review tab

    how to position two transparent images to overlap opposite corners of a container div

    How to enable CSS editing in Intellij

    How to use sass (scss) compared to css

    How to style a button's font in CSS?

    How to change border of div containing radio button when checked