Grow your CSS skills. Land your dream job.

::selection will not work at all

  • # November 20, 2012 at 4:01 am

    Hey guys having a bit of a problem I cant seem to get

    ::selection {
    background: #ffb7b7;
    }

    ::-moz-selection {
    background: #ffb7b7;
    }

    to work at all on a site I am working on is there any reasons why this wouldn’t work?

    Thanks, Luke.

    # November 20, 2012 at 4:37 am

    What element are you applying it to, it won’t work on it’s own?

    # November 20, 2012 at 4:40 am

    I am trying to apply it to the whole website, It just doesn’t seem to be working…
    I tried targeting the body, the container div basically everything I can think of and still haven’t had any luck.

    If there is any other way to achieve this effect I am all ears.

    # November 20, 2012 at 4:46 am

    Interesting…it works in Codepen without targeting an element…I’m not sure that is proper behaviour but whatever.

    You could try the universal selector

    *::selection {
    background: #ffb7b7;
    }

    *::-moz-selection {
    background: #ffb7b7;
    }

    Otherwise, I’m wondering if it isn’t a browser issue.

    Perhaps you could put something in Codepen so we see what the issue might be?

    # November 20, 2012 at 4:49 am

    Just tried that, still no luck. Damn this is annoying, probably something so stupid to. Is there anything that would cancel this out or stop it working correctly?

    # November 20, 2012 at 4:51 am

    We can’t tell until we see the site in question. It could be something fundamental or something in a css setting that is overriding it.

    # November 20, 2012 at 4:53 am

    Here is the sites CSS, yes I am a noob still.

    @font-face {
    font-family: ‘grosregular';
    src: url(‘gros___-webfont.eot’);
    src: url(‘gros___-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘gros___-webfont.woff’) format(‘woff’),
    url(‘gros___-webfont.ttf’) format(‘truetype’),
    url(‘gros___-webfont.svg#grosregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘nexa_lightregular';
    src: url(‘nexa_light-webfont.eot’);
    src: url(‘nexa_light-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘nexa_light-webfont.woff’) format(‘woff’),
    url(‘nexa_light-webfont.ttf’) format(‘truetype’),
    url(‘nexa_light-webfont.svg#nexa_lightregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    body{
    background-color:#e7e8e9;
    font-family:’grosregular';
    }

    #header-1{
    width:152px;
    height:193px;
    margin-left:auto;
    margin-right:auto;
    padding-top:37px;
    }

    #header-2{
    background-image:url(images/datebox.png);
    background-repeat:no-repeat;
    background-position:0px 2px;
    width:152px;
    height:90px;
    margin-left:auto;
    margin-right:auto;
    }

    #dateholder{
    font-size:8px;
    color:#FFF;
    width:72px;
    margin-left:auto;
    margin-right:auto;
    padding-top:45px;
    padding-right:64px;
    }

    #links{
    margin-top:auto;
    margin-bottom:auto;
    position:fixed;
    width:44px;
    }

    .linkholder li{
    font-size:8px;
    color:#FFF;
    list-style:none;
    text-decoration:none;
    }

    a:link{
    color:#c0c0c0;
    text-decoration:none;
    }

    a:visited{
    color:#c0c0c0;
    }

    a:hover{
    color:#ef4158;
    }

    a:active{
    color:#ef4158;
    }

    .date{
    display:block;
    color:#ef4158;
    }

    #container{
    width:308px;
    padding-left:auto;
    padding-right:auto;
    margin-left:auto;
    margin-right:auto;
    }

    #container p{
    font-size:8px;
    color:#c0c0c0;
    position: relative;
    padding-top: 7px;
    }

    .accent{
    color:#ef4158;
    font-size: 8px;
    }

    #container h1{
    font-size: 8px;
    color: #ef4158;
    font-style: none;
    text-decoration: none;
    font-weight: normal;
    padding-top:10px;
    }

    #weekwrapper{
    width: 148px;
    margin-left: auto;
    margin-right:auto;
    font-size: 8px;
    color:#c0c0c0;
    }

    #weekwrapper p{
    width: 150px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:5px;
    }

    #single_1 img{
    padding-top:3px;
    }

    #break{
    padding-top: 5px;
    position : relative;
    text-align : center;
    margin: 0 0 0 0;
    border-bottom : 1px solid #c0c0c0;
    }

    #astyle{
    padding-top:15px;
    padding-bottom: 12px;
    }

    .chooseapage ul{
    margin-left:auto;
    margin-right:auto;
    display:inline;
    list-style:none;
    text-decoration:none;
    float:left;
    }

    .chooseapage li{
    margin-left:auto;
    margin-right:auto;
    display:inline;
    list-style:none;
    text-decoration:none;
    float:left;
    }

    #container::selection {
    background: #ffb7b7; /* Safari */
    }

    #container::-moz-selection {
    background: #ffb7b7; /* Firefox */
    }

    #container::-webkit-selection {
    background-color: #FFA;
    color: #000;
    }

    *::selection {
    background: #c0c0c0;
    }

    *::-moz-selection {
    background: #c0c0c0;
    }

    Thanks for your help so far by the way, very much appreciated.

    # November 20, 2012 at 4:54 am

    according to MDN doc’s its normal behavior without targeting elements, what browser are you using @luke ?

    # November 20, 2012 at 4:56 am

    Unfortunately, the CSS alone won’t help. We need to to see the content as well, that’s why I suggested Codepen so we can see it in action.

    Unless you have a link to a live site of course.

    # November 20, 2012 at 5:11 am

    @ToxicFire
    Hey man thanks for the input, I am using chrome and Firefox to test this atm.

    http://codepen.io/anon/pen/ebuGC

    how about that @Paulie_D sorry never used codepen before.

    # November 20, 2012 at 5:41 am

    I don’t know why but if I take this out

    script type=”text/javascript” src=”jquery.fancybox-media”>

    a lot of the styling seems to start working where it wasn’t before.

    # November 20, 2012 at 5:53 am

    @Paulie_ D tried that there no still with no luck, damn this sucks.

    # November 20, 2012 at 7:07 am

    Hmmm…there’s definitely something overriding it.

    I’ve tried stripping out the sections that shouldn’t be relevant but it might take a while to find it.

    Frankly, it’s not a huge issue, there are quite a few other things that need fixing in that code first but that’s another matter.

    If I can, I ‘ll take another look.

    # November 20, 2012 at 7:45 am

    [Does this work for you?](http://codepen.io/alexmccabe/pen/eFBDn “::selection”) I added a pen of some code that I used.

    # November 20, 2012 at 7:48 am

    I found the problem, your date holder JS is breaking the whole CSS styling. I deleted it and everything worked fine.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".