SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation remove scroll bar from <select> tag

    I am using a print style sheet to remove borders and scroll bars from my form. While this style works for textareas, it does not remove the arrow from a select tag.

    select {
    scroll:none;
    border:none;
    scrollbar-base-color: #FFF;
    scrollbar-face-color: #FFF;
    scrollbar-arrow-color: #FFF;
    scrollbar-3dlight-color: #FFF;
    scrollbar-highlight-color:#FFF;
    scrollbar-shadow-color: #FFF;
    scrollbar-darkshadow-color: #FFF;
    scrollbar-track-color: #FFF;
    }

    http://mainly-danish.com/ARD3_current.html

    Click a radio button to make visible the select tags..

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I'm not really clear on what the issue is. Are you trying to style this form so that it can be printed? If I try to print it, I don't see any scroll bars anywhere.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes this form needs to be printed. Select one of the radio buttons under the sentence... Indicate the number of Curriculum areas to be evaluated....

    Select an option, then click print preview.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, tried that and I don't get any scroll bars etc. If I choose "4 weeks", that just prints as clean text.

    What browser are you seeing this in?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,566
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't expect that stuff to work. Especially not on a form element such as <select>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using IE. It is not a full scroll bar, but the arrow used to select the options

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Ann C View Post
    I'm using IE. It is not a full scroll bar, but the arrow used to select the options
    Is this IE9 or just older versions?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,566
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I believe older IE got rid of this, didn't they?

    Perhaps Javascript could help you with this? I don't know the limitations of it, and I doubt the scope of JS could go so far as to manipulate the browser, but you could look something up .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i also posted this in the Javascript section.
    The solution is to use javascript to populate a <span> with the information in the select tag.
    Use classes to display the <select> on screen and display:none @media print.
    Use classes to display:none the <span> and display @media print.

    I've used javascript on this form to do just that with the "right header". The "student name, student ID, date, and page___ of ___ " print but are not displayed on screen.


Tags for this Thread

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
  •