SSC Color Pick

HTML

<h3>五星</h3>
<div class="five">
    <ul class="direct_five_pick">
        <li class="ball_0">0</li>
        <li class="ball_1">1</li>
        <li class="ball_2">2</li>
        <li class="ball_3 active">3</li>
        <li class="ball_4">4</li>
        <li class="ball_5">5</li>
        <li class="ball_6">6</li>
        <li class="ball_7 active">7</li>
        <li class="ball_8">8</li>
        <li class="ball_9">9</li>
    </ul>
    <ul class="direct_five_pick">
        <li class="ball_0">0</li>
        <li class="ball_1 active">1</li>
        <li class="ball_2">2</li>
        <li class="ball_3 active">3</li>
        <li class="ball_4">4</li>
        <li class="ball_5">5</li>
        <li class="ball_6">6</li>
        <li class="ball_7 active">7</li>
        <li class="ball_8">8</li>
        <li class="ball_9">9</li>
    </ul>
    <ul class="direct_five_pick">
        <li class="ball_0">0</li>
        <li class="ball_1">1</li>
        <li class="ball_2">2</li>
        <li class="ball_3 active">3</li>
        <li class="ball_4">4</li>
        <li class="ball_5">5</li>
        <li class="ball_6">6</li>
        <li class="ball_7 active">7</li>
        <li class="ball_8">8</li>
        <li class="ball_9">9</li>
    </ul>
    <ul class="direct_five_pick">
        <li class="ball_0">0</li>
        <li class="ball_1">1</li>
        <li class="ball_2">2</li>
        <li class="ball_3 active">3</li>
        <li class="ball_4">4</li>
        <li class="ball_5">5</li>
        <li class="ball_6">6</li>
        <li class="ball_7 active">7</li>
        <li class="ball_8">8</li>
        <li class="ball_9">9</li>
    </ul>
    <ul class="direct_five_pick">
        <li class="ball_0">0</li>
        <li class="ball_1">1</li>
        <li class="ball_2">2</li>
        <li class="ball_3 active">3</li>
        <li class="ball_4">4</li>
        <li class="ball_5">5</li>
        <li class="ball_6">6</li>
        <li class="ball_7 active">7</li>
        <li class="ball_8">8</li>
        <li...

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    clear: both;
}

.direct_five_pick li,
.direct_four_pick li {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    color: white;
    line-height: 50px;
    display: inline-block;
    background: gray;
}

.direct_five_pick li.active {
    background: red;
}

.direct_four_pick li.active {
    background: green;
}