Флажок стиля с использованием HTML и CSS [дубликаты]

Question

Флажок стиля с использованием HTML и CSS [дубликаты]

0

Мне не очень нравится флажок Chromes, поэтому я попробовал стилизовать его с помощью css, но я думаю, что это не сработало.

input[type="checkbox"]
    {
    border: 2px solid black;
    outline: 0;
    background: transparent;

}

user3284463 16 фев. 2014, в 07:36

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Suman K.C · Answer 1 · 2014-02-16T06-22-00.000Z

Stackoverflow: как установить флажок с помощью CSS?

Hongkiat: настроить флажки и радио кнопки

CSScheckbox: http://www.csscheckbox.com/

Maulik Suchak · Answer 2 · 2014-02-16T04-52-00.000Z

HTML

<input type="checkbox" class="customCheckBox large" />

CSS

    .customCheckBox[type="checkbox"]:after{
        position: relative;
        display: block;
        left: 2px;
        top: -11px;
        width: 7px;
        height: 7px;
        border-width: 1px;
        border-style: solid;
        border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
        content: "";
        background-repeat: no-repeat;
        background-position:center;
    }

    .customCheckBox[type="checkbox"]:before{
        border: 1px solid #808080;
        content: "";
        background: #FFF;
        position: relative;
        display: block;
        width: 11px;
        height: 11px;

    }
    .customCheckBox[type="checkbox"]:checked:after{
        background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC');
    }
    /* Large checkboxes */
    .customCheckBox.large{
        height:22px;
        width: 22px;
    }

    .customCheckBox.large[type="checkbox"]:before{
        width: 20px;
        height: 20px;
    }
    .customCheckBox.large[type="checkbox"]:after{
        top: -20px;
        width: 16px;
        height: 16px;
    }

Предоставление большого класса, потому что вы, вероятно, хотели бы добавить еще один тип стиля в ваш css или размер флажка здесь :-)