Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: Cross-browser Styled Dropbox

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default Cross-browser Styled Dropbox

    Hi guys,

    I managed to style a dropbox that works cross-browser. However, I can't solve the following issue:
    When the name of a selection is short, it displays fine when it's selected. When the name of a
    selection is long, it superimposes itself over the dropdown arrow image. See attached images.

    Can you suggest a way to alter the css so that the width of long selected names are prevented from
    reaching the dropdown arrow, say by maybe 3 or four pixels?

    Thanks,

    Kenny

    The website

    Code:
        #mySelect {	
        position: relative;
        top: 0px;
        left: 0px;
    }
    
    .styled {
    	color:#E3B172;
        width: 185px;
        height: 26px;
        overflow: hidden;    
    	background: url(/images/dropdown-arrow.png) no-repeat 100% #37271A;
        border: 1px solid #4C3726; 
    	-webkit-border-radius: 6px 6px 6px 6px;
    	-moz-border-radius: 6px 6px 6px 6px;
    	border-radius: 6px 6px 6px 6px;
        -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
        -pie-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    	-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    	box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    	cursor:hand;
    } 
    .styled:hover {
        border: 1px solid #4C3726; 
    	
    }
    
    .styled select {
    	color:#E3B172;
        position: relative;
        background: transparent;
        top: 01px;
        left: 0px;
        width: 214px;
        height: 24px;    
        padding: 2px 0px 3px 3px;
        font-size: 16px;
        -webkit-appearance: none; 
    }


    Code:
                
    <form action="<? bloginfo('url'); ?>" method="get">
     <div id="mySelect" class="styled">           
     <select name="page_id" id="page_id">
     <?php
     global $post;
     $args = array( 'numberposts' => -1);
     $posts = get_posts($args);
     foreach( $posts as $post ) : setup_postdata($post); ?>
                    <option style="border:1px solid #3d2a1b;color:#E3B172;background:#37271A;z-index:-2;" value="<? echo $post->ID; ?>"><?php the_title(); ?></option>
     <?php endforeach; ?>
     </select></div>
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	screenshot-1.jpg 
Views:	137 
Size:	17.0 KB 
ID:	5504   Click image for larger version. 

Name:	screenshot-2.jpg 
Views:	151 
Size:	16.8 KB 
ID:	5505  
    Last edited by KennyP; 08-13-2014 at 10:17 AM.

  2. The Following User Says Thank You to KennyP For This Useful Post:

    kplusonline (08-25-2014)

  3. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Are you wanting the dropbox to change size per selection?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  4. The Following User Says Thank You to Deadweight For This Useful Post:

    KennyP (08-13-2014)

  5. #3
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default

    Thanks for your reply Deadweight. No I do not want the dropbox to change size per selection. I would like each title itself to be prevented from fully displaying beyond several pixels before they reach the dropdown arrow. That would limit each title to display no more than a width of 168px in order that it no longer superimpose itself over the arrow as it does now (showing in the second image attachment); the remainder of each title should be hidden once it is selected.
    Last edited by KennyP; 08-13-2014 at 06:23 PM.

  6. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Currently the only thing that i can think of is actually making the dropdown arrow have a background color.
    Meaning go into photoshop and give it a certain color. I do have a custom drop down object like what you have above.
    If you would like to see it please let me know.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  7. The Following User Says Thank You to Deadweight For This Useful Post:

    KennyP (08-13-2014)

  8. #5
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default

    Thank you. Yes I'd love to see the dropdown you have, and possibly replace the one I have with it.
    Ideally, I wanted the dropdown to also have a styled vertical scrollbar and still maintain the width
    of the options list as wide as the longest title, but I haven't been able to get it to work.

    Regarding the background color, I already put a background color on the arrow, same color as the
    rest of the background. Unfortunately, even with a high z-index setting I couldn't get it to display
    over the selected title. The selected title always displays over the arrow instead, and looks very
    sloppy.
    Last edited by KennyP; 08-14-2014 at 09:12 PM.

  9. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Sorry Kenny it took me so long to reply.
    Besides missing the colors and everything you wanted something like this:
    http://thebcelements.com/dhtml/dropdown/

    (Works on mobile also)
    Last edited by Deadweight; 08-15-2014 at 09:49 PM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  10. The Following User Says Thank You to Deadweight For This Useful Post:

    KennyP (08-16-2014)

  11. #7
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default

    Wow! Thanks for sharing that Deadweight! That's almost what I've been trying to do,
    except for a customized scrollbar. Also, I would need to add the classes and IDs
    within the <select> and <option> tags, or into a div wrapper as you see in the code
    of my first post.

    Thanks again,

    Kenny
    Last edited by KennyP; 08-16-2014 at 03:17 AM.

  12. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Yes I know. I'll update it with all the style once I get back home and show you it again. I'll be home around 1pm EST (4am EST). I'll let you know when I update the link with your titles. FYI this isn't your regular option/select menu :3 if you look at the source it may surprise you!
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  13. The Following User Says Thank You to Deadweight For This Useful Post:

    KennyP (08-16-2014)

  14. #9
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default

    Thanks Deadweight - looking forward to seeing it.

  15. #10
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Umm not entirely sure what you mean by
    "Also, I would need to add the classes and IDs
    within the <select> and <option> tags, or into a div wrapper as you see in the code
    of my first post. "
    however i updated this:
    http://thebcelements.com/dhtml/dropdown/

    Another note. Change the dropdown and click view.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  16. The Following 2 Users Say Thank You to Deadweight For This Useful Post:

    KennyP (08-16-2014),kplusonline (08-25-2014)

Similar Threads

  1. Styled vertical nav bar
    By jhatter in forum CSS
    Replies: 1
    Last Post: 07-07-2010, 10:18 PM
  2. styled scrollbars?
    By tpravioti in forum CSS
    Replies: 6
    Last Post: 02-04-2010, 01:20 AM
  3. Dropbox
    By Medyman in forum The lounge
    Replies: 2
    Last Post: 03-02-2009, 05:33 PM
  4. Styled Drop List
    By dude9er in forum CSS
    Replies: 1
    Last Post: 02-26-2009, 06:38 AM
  5. Amazon style dropbox delay option?
    By adambm in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-06-2006, 09:08 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •