Results 1 to 9 of 9

Thread: how to adapt chainedmenu to css without form

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    904
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Default how to adapt chainedmenu to css without form

    1) Script Title: Chained Menu

    2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...menu/index.htm

    3) Describe problem:

    This is the code I have:
    Code:
    						<div class="main-search-input-item">
    							<select data-placeholder="All Categories" class="chosen-select" >
    								<option>All Categories</option>	
    								<option>Shops</option>
    								<option>Hotels</option>
    								<option>Restaurants</option>
    								<option>Fitness</option>
    								<option>Events</option>
    							</select>
    						</div>
    And this is the code of the chainedmenu:
    Code:
    <form name="listmenu0">
    <table align="center"><tr>
    <td><select name="firstlevel" style="width:180px;"></select></td>
    <td><select name="secondlevel" style="width:160px;"></select></td>
    <td><select name="thirdlevel" style="width:160px;"></select></td>
    <td><input type="button" value="Go" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">
     <input type="button" value="Reset" onclick="resetListGroup('chainedmenu')">
    </tr></table>
    </form>
    But as there is no form in it, how can I make sure that the current css will be used for the selector?
    This is how the form should look like
    And this is how it is now

    Can anyone help me out please?
    Working on a deadline ...
    Thanks!

  2. #2
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    904
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Default

    Almost there, just, how can I style the options in the chained menu options?

    This is how it looks now
    This is how the form should look like

    I cannot copy the code, because it is in a form (the chained menu) without clear option
    Code:
    <select name="firstlevel"></select>
    where I don't see css possibilities for the options.
    Whilst the other one is no forms, just select option.
    Code:
    <select data-placeholder="All Categories" class="chosen-select" >
    <option>All Categories</option>
    Any support, please?
    Thanks.

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,820
    Thanks
    49
    Thanked 237 Times in 230 Posts
    Blog Entries
    56

    Default

    You can hardly style select boxes via CSS. They are rendered by the OS, not HTML. But there are plugins that look like selects and can be styled, see for ex. this fiddle.

  4. #4
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    904
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Default

    Thanks, Arie.
    But if you take a look at the image, you can see that some styling can be done (rounded corners, shadow, soft edges)
    Click image for larger version. 

Name:	Knipsel.JPG 
Views:	25 
Size:	18.3 KB 
ID:	6246

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,820
    Thanks
    49
    Thanked 237 Times in 230 Posts
    Blog Entries
    56

    Default

    Chechu, I know that native select boxes can be styled to some extend, but depending on the browser / the OS the possibilities vary a lot and are unpredictable. What looks good now may look ugly in the future. And there's a huge difference between how a computer / desktop treats boxes and how mobile devices do it.

  6. #6
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    904
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Default

    Well, Arie, let's call that a matter of taste.
    Still wondering how the css looks like to get that select menu as in the image.

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,820
    Thanks
    49
    Thanked 237 Times in 230 Posts
    Blog Entries
    56

    Default

    Chechu, I didn't use 'good' and 'ugly' in the esthetical sense of the word, but rather as meaning 'what I want' and 'what I don't want'. So if my styles for 'select' and 'option' fit my needs right now in all browsers, then it may be very well possible that this is not the case anymore in the future because the OS may have changed things beyond my control. This happened to this select box. It looked about the same in all browsers several years ago (that's what I wanted), but not any more (that's what I don't want). Look at how different browsers render the options of that select box.
    Are you sure the model you're referring to is a genuine select box, not a plugin?

  8. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    904
    Thanks
    114
    Thanked 2 Times in 2 Posts

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,820
    Thanks
    49
    Thanked 237 Times in 230 Posts
    Blog Entries
    56

    Default

    Well, I'm pretty sure that only 'select' can be styled to a certain extend, but not the options of the box. At least, not in a crossbrowser way. Example:
    Code:
    <div style="width: 140px; overflow: hidden; border: 1px solid grey; border-radius: 15px; padding: 10px; ">
    <select style="font-family: arial; font-size: 20px; border:0; ">
    <option selected > Three options
    <option style="font-size: 16px; border: 0"> This is option 1 from a select box
    <option style="font-size: 16px"> This is option 2 from a select box
    <option style="font-size: 16px"> This is option 3 from a select box
    </select>
    </div>

Similar Threads

  1. How to adapt websites for mobiles?
    By robertsaunders in forum Looking for such a script or service
    Replies: 0
    Last Post: 07-24-2009, 06:09 PM
  2. 2 ChainedMenu on one Page
    By ROYW1000 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-08-2008, 05:55 PM
  3. Please help me to adapt this Code...
    By swjiten in forum JavaScript
    Replies: 7
    Last Post: 04-22-2008, 10:27 PM
  4. adding targetframe to chainedmenu"
    By delex in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-07-2007, 01:46 PM
  5. chainedmenu
    By Rman in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-21-2005, 06:20 PM

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
  •