Skip to main content

Forums

This topic contains 3 replies, has 2 voices, and was last updated by  Paulie_D 1 year, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #262129

    kittywinkle
    Participant

    and ideas? its been 3 days…. arrrggghhh. Thank you, Kitty

    .selectnew {

    height: 30px;
    width: 180px;
    border: #FFFFFF;
    background: #CCCCCC; 
    background:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, skyblue, skyblue);
    

    background-position:
    calc(100% – 21px) calc(1em + 2px),
    calc(100% – 16px) calc(1em + 2px),
    100% 0;
    background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
    background-repeat: no-repeat;

    /* styling and reset */

    border: thin solid blue;
    font: 300 1em/100% “Helvetica Neue”, Arial, sans-serif;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;

    /* reset */

    border-radius: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance:none;
    -moz-appearance:none;
    //Remove original arrows
    -webkit-appearance: none;
    //Use png at assets/selectArrow.png for the arrow on the right
    //Set the background color to a BadAss Green color
    background: url(assets/selectArrow.png) no-repeat right #BADA55;
    }

    #262130

    Paulie_D
    Moderator

    Unfortunately some random CSS is unlikely to help.

    A link to the offending page or a minimal demo in Codepen.io would be optimal.

    #262136

    kittywinkle
    Participant

    oh! sorry about that…

    I have 2 arrows
    http://www.courtesan-boutique.co.uk/11.html

    #262137

    Paulie_D
    Moderator

    You’re actually using a select and styling those cross-browser is always going to be problematical since each browser renders them differently.

    However using …

    select {
        appearance:none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
    }
    

    …will get you started although you may need to be specific in your selector or use !important to override the browser default styling. Note also that this may cause other stylistic changes which you might not want.

    Generally, if you want total control you use a different element/structure styled to look like a select….or even better a JS alternative.

    https://stackoverflow.com/questions/14218307/select-arrow-style-change

    That said, there’s an old post that suggest that browsers put a lot of work into getting selects to work & look the way they want and fiddling with them is more work than is deserved.

    https://hugogiraudel.com/2013/04/08/css-alternative-select/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star