SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question select forms - border?

    Hi

    Just a simple question thats starting to bug me

    I have a search form on a site, and while the style bit works for the text field and submit button it won't work for the select thingy...

    Have a look at the screen shot:


    I want the select to look the same as the input and submit boxes. Code I am using is below - any suggestions?

    Thanks alot Rick

    Code:
    <!-- login form -->
    
                      &amp;nbsp;Search:&amp;nbsp;
                      <input type="text" size="12" ..." style="font-family: Verdana, Arial; font-size: 11px; border: 1px solid #000000; background-color: #00CCFF" value="for..." onFocus="this.value='';" />
                      &amp;nbsp;
                      <select name="what" onFocus="this.value='';" style="font-family: Verdana, Arial; font-size: 11px; border: 1px solid #000000; background-color: #00CCFF">
    			<option value="1">Whole Site</option>
    			<option value="2">Articles</option>
    			<option value="3">Forums</option>
    			<option value="4">the Net</option>
    			<option value="5">Everywhere</option>
    		  </select>
                      &amp;nbsp;<input type="submit" value="GO" style="font-family: Verdana, Arial; font-size: 9px; border: 1px solid #000000; background-color: #00CCFF" />
    Rick

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "...we currently use the built in Windows drop-down listbox, which is a windowed control (technical Windows
    programming term - it means the control is a window in and of itself). ... we need to re-implement SELECT as a windowless control (or some other implementation). We have a first-pass at this - the IE:SELECT element behavior, check the IE 5.5 beta SDK - but we felt it would not be high-quality enough in this release to pass for the <SELECT> element."
    Chris Wilson, Internet Explorer Team
    He is talking about the z-index problem with <select>s, but I think the answer explains you border problem too - the <select> is still a windowed control

    What you can do is
    1. use an <object> tag instead of <select>, and use the object ComboBox (classid="clsid:8BD21D30-EC42-11CE-9E0D-00AA006002F3"), and set...
    <PARAM NAME="BackColor" VALUE="16763904"> to get bgcolor 00ccff
    <PARAM NAME="SpecialEffect" VALUE="0"> to get fmSpecialEffectFlat, not fmSpecialEffectSunken
    border=1 (for the object tag)
    <PARAM NAME="BorderStyle" VALUE="0">
    <PARAM NAME="BorderColor" VALUE="2147483654"> to get 1px solid black border
    etc etc... have fun! (and it's only working in IE/windows)

    or
    2. create your own windowless select element
    Example: http://www.dansteinman.com/dynduo/en/selectlist.html

  3. #3
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - I'll go and have a look at that site

    Rick
    Rick

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i would, personally, shy away from both solutions. the first one because it's obviously IE only, and the second one because it relies completely on Javascript being available and enabled, which - of course - is a big accessibility no-no, as it will just not work under text browser or standard browsers which have it turned off (incidentally, i tried the code from the dynamic duo site under IE5.5 with JS on, and it still didn't work for me...)
    redux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's true (the accessibility issues), but if you for some reason (obstinate client) must have a select list with a certain look...
    And maybe the IE only limitation isn't a problem always.
    I think the Dynamic Duo script hasn't been updated for a while, but you can get some "inspiration" from it

  6. #6
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by redux
    i would, personally, shy away from both solutions...
    I pretty much came to this conclusion myself, and for pretty much the reasons you have both mentioned above.

    The question was for a site I am developing, and I don't really think it will make a massive difference. I was just looking for a CSS solution that would make it look a little more like the rest of the forms, however its not the end of the world if it doesn't. If I ever need to do this in the future at least I know how now

    Thanks etc...
    ZOO
    Rick


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
  •