CODEWITHSUNDEEP
jqueryhtmlcss
Marc Morales Valldepérez
Marc Morales Valldepérez

Reputation: 561

Change color when style select is chosen

I'm using this select style http://www.8stream.com/scripts/styleSelect/

I have the problem that the right select, when one option is chosen, draw a blue outline.

What Can I do to not draw this outline?

The css is:

.selectDark .styleSelect_item{
        width:150px;
        }

.selectDark .styleSelect_item_start{
        height:8px;
        background:url("/images/images//darkFirst2.jpg") no-repeat top left;
        }

.selectDark .styleSelect_item_content{
        height:100px;
        overflow-x: hidden;
        overflow-y: scroll;
        background:#525252;
        }

.selectDark .styleSelect_item_end{
        height:8px;
        background:url("/images/images/darkLast2.jpg") no-repeat top left;
        }

.selectDark{
        background: url("/images/images/darkBackground2.jpg") no-repeat top left;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        }

.selectDark .passiveSelect,.selectDark .activeSelect{
        height:25px;
        line-height:2em;
        display:block;
        cursor:pointer; 
        padding-left:10px;
        margin-right:10px;
        }

.selectDark .passiveSelect{
        background:url("/images/images/darkNormal.jpg") no-repeat top right;
        color:#fff;
        }

.selectDark .activeSelect{
        background:url("/images/images/darkNormal.jpg") no-repeat top right;
        color:#fff;

        }

.selectDark ul{
        padding:0;
        margin:0;
        list-style:none;
        cursor:pointer; 
        }

.selectDark li{
        padding:25px 0;
        margin:0;
        font-weight:normal;
        padding:2px 0 2px 12px;
        color:#aeaeae;
        }

.selectDark li:hover{
        color:#fff;
        }

.selectDark .selected{
        color:#fff;
        }

I'm using this script in : http://81.35.152.41:8888/ca/dinamic/coleccions

Thanks

Upvotes: 0

Views: 775

Answers (2)

user1211577
user1211577

Reputation: 

.selectDark{
    background: url("/images/images/darkBackground2.jpg") no-repeat top left;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    **outline: none;**
    }

EDIT:

At the top of your stylesheet, try adding this:

* {
    outline: none;
}

This will target anything on the page and give it an outline of none.

@SnakeBombs - Thats not true. Everything gets an outline. Safari gets a blue one, Firefox gets a dotted one. It will be outlined in any browser.

Upvotes: 2

SnakeBombs
SnakeBombs

Reputation: 21

This isn't exactly website-related as much as it is Chrome-related. Google Chrome highlights focused inputs in orange.

*:focus{
    outline: none;
}

Other browsers didn't have outlines on focused elements in the first place, but it's a feature of Chrome, which is why it showed despite not being present in your CSS.

Upvotes: 0

Related Questions