CSS Overview HomeWork - Problem 2. International Employees - checkbox ?


0
Чудя се трябва ли да стилизираме и checkbox-ите?
Това си е страшно приключение, което ми се струва, че ще изяде време колкото за цялото останало домашно :)



Отговори



1
Единственото, което трябва да направиш е да сложиш  disabled="disabled".

от monsterEnergy (954 точки)


0
Туй е сторено, ама много ме чопли и за стайлинга да се погрижа, а е голям гърч като гледам.
Ще оставя за накрая ако имам много свободно време за тестове и упражнения :)))

от piperche (296 точки)


0
Това е нещо, на което бе бях обърнал внимание до сега. Добре, че не ги качих така. 
Надявам се да остане време за това през уикенда. 

от StoikoNeykov (2621 точки)


0

Един друг въпрос относно същата задача и точно тези checkboxes. Опитвам се да ги направя да са квадратни(както е на снимката), а не със заоблени ръбчета. И резултатът е, че във Firefox ми се получават квадратни, а в Chrome - не. При мен на Firefox си излизат квадрати, а във Chrome са заоблени.Явно по default е различно при различните браузъри. И при Firefox не ми се получава background-color на checkbox-a, а в Chrome се получава. Уж търсих, търсих, но не успях да намеря точно това. Някой по опитен има ли някакви препоръки/предложения/решения. Не знам това дали е чак толкова важно да се задълбава, но за изпита може и да е.

Това е Firefox Developer Edition -> Firefox

    Това е Chrome                      -> Chrome

Може и аз нещо да бъркам, но кодът е еднакъв и при двете снимки.


от Miroslav001 (55 точки)


0
Точно това е нещо, което си е browser dependence и не зависи изцяло от вас. Ако сте забелязали, различните browser-и визуализират по различен начин input type="range". Така че не се впрягайте толкова на това.

от monsterEnergy (954 точки)

0

Колега стилизирането е възможно, но....

1во се дава input [type='checkbox'] { display: none;}

следва 4 педи CSS, което няма резон да се прави за 1во домашно по CSS.

Доколкото видях има много интересни приложения. Ако искате, пуснете търсене по въпроса.

Колегата monsterEnergy има право,  да не се втеляваме чак толкоз ;)


от piperche (296 точки)


0

Във връзка със същото домашно, след като станах разногледа, след 2 дни търсене на най-подходящия шрифт ето какво намерих, въпреки че не е 100% идентичен, е най-близкия и веднага споделям да ползвате със здраве :)

https://www.google.com/fonts/specimen/Droid+Sans

Предполагам, че ползвания шрифт е дифолтен сансериф за платформа различна от уиндоус.


от piperche (296 точки)


13

Привет!

Като за първо домашно и аз не мисля, че толкова стриктно трябва да следим дали е едно към едно с условието, лично аз при проверяването на домашни не бих взела предвид дали checkbox-четата са съвсем същите. Все пак ми беше любопитно да разбера как да приложа собствен стил при тях и след известно четене и наместване се получи това:

checkbox

 Кодът е:

input[type="checkbox"] {
   -webkit-appearance: none;       //премахваме default-ния изглед за няколко браузера
   -moz-appearance: none;
   -o-appearance: none;
   width: 13px;                                //слагаме собствен стил за кутийките
   height: 13px;
   background-color: #D3CFC7;
   border: 1px solid #cacece;
   box-shadow: inset 2px 2px 1px #5E5F5F;
}

input[type="checkbox"]:checked:after {   //това вече е да отбележим как ще изглеждат, когато сложим тикче
   content: '\2714';                                        // кодът на символа "tick"
   font-size: 12px;                                         //визия на тикчето и наместване в самата кутийка
   font-weight: bold;
   color: #5E5F5F;
   position: absolute;
   top: 81;
   left: 359;
}


от Daniela_Popova (1125 точки)

0
Страхотно и адмирации за труда ти да го направиш.

от monsterEnergy (954 точки)



1
Ето тук може да намерите доста полезна информация относно стилизирането на check box.

от wnvko (3123 точки)


0

Аз го направих с картинки - една когато е чекнато и друга, когато не е. Картинките ги изрязах директно от картинката на заданието.

В HTML-a <td><label class="myCheck"><input type="checkbox"></input><span></span></label></td>

В CSS-a - 

.myCheck span {
width: 13px;
    height: 13px;
    display: block;
    background: url("uncheck.jpg");
}
.myCheck input:checked + span {
    background: url("checked.jpg");
}