Опције се дају кориснику када постоји више вредности једног елемента, одакле корисници могу да изаберу опцију према својим преференцама. Постоји у различитим облицима, као што су поље за потврду, падајући мени и радио дугме. Тачније, падајући мени пружа унапред дефинисане листе опција које омогућавају кориснику да одабере једну.
Овај приручник ће објаснити процедуру за измену боје изабране опције. За ово ћемо прво направити падајући мени и стилизовати га користећи ЦСС, а затим променити боју изабране опције.
Хајде да почнемо!
Како направити падајући мени користећи ХТМЛ и ЦСС?
У ХТМЛ-у можете креирати падајући мени користећи „ <ознака> ”, “ <селецт> ' и ' <опција> ' ознаке. Да бисмо јасније разумели, пређимо на синтаксу падајућег менија.
Синтакса
Ево синтаксе падајућег менија:
< етикета > Текст етикета >< изаберите >
< опција вредност = '' > Опција 1 опција >
< опција вредност = '' > опција2 опција >
...
< опција вредност = '' > опцијаН опција >
изаберите >
Хајде да објаснимо ХТМЛ ознаке које се користе у горњој синтакси:
- <ознака>: Користи се за одређивање скраћене опције <лабел> у текстуалном облику.
- <одабери>: Овај елемент омогућава кориснику да изабере ставку са листе.
- <опција>: Користи се за пружање опција за падајући мени.
Овде представљамо практичан пример да објаснимо горњу синтаксу.
Корак 1: Направите падајући мени
Прво ћемо креирати <див> и додати наслов помоћу ознаке <х1>. Да бисмо додали падајући мени унутар њега, користићемо ознаку ознаке и додати „ Изаберите државу ” као ознака. Након тога, користићемо ознаку <селецт> да би опције биле прихватљиве за корисника и доделили вредности опција са „ <опција> ” ознака.
ХТМЛ
< див >< х1 > Линук х1 >
< етикета > Изаберите државу: етикета >
< изаберите име = 'одабери' ид = 'одабери' >
< изабрана опција скривена > --Изаберите једну опцију-- опција >
< опција вредност = '1' > Немачка опција >
< опција вредност = 'два' > Иран опција >
< опција вредност = '3' > Турска опција >
< опција вредност = '4' > Индија опција >
< опција вредност = '5' > Кина опција >
изаберите >
див >
Белешка: Користили смо „ скривено изабрано ' навести ' -Изабери опцију- ” као подразумевана опција. Али када корисник одабере један од њих, биће скривен.
У наставку ћемо отићи на ЦСС и стилизовати га.
Корак 2: Стилизирајте падајући мени помоћу ЦСС-а
Користићемо „ див ” да бисте приступили креираном контејнеру и поставили боју позадине див као „ ргб(191, 207, 235) ”. Такође ћемо поставити висину дива, величину фонта текста и боју текста као „ 150пк ”, “ к-велики ', и ' ргб(2, 0, 0) ', редом. Затим ћемо поставити границу див као „ 5пк ”, “ гребен ', и ' ргб(108, 75, 209) ”.
ЦСС
див {боја позадине: ргб ( 191 , 207 , 235 ) ;
висина: 150пк;
фонт-сизе: к-ларге;
боја: ргб ( два , 0 , 0 ) ;
граница: 5пк гребена ргб ( 108 , 75 , 209 ) ;
}
Сада ћемо стилизовати падајући мени и поставити боју позадине менија као „ ргб(194, 222, 209) ” и ивица менија као „ 3пк ”, “ чврст ', и ' ргб(84, 73, 116) ”. Након тога, поставићемо ширину, висину и величину фонта менија као „ 300пк ”, “ 30пк ' и ' велики ', редом:
изаберите {позадина: ргб ( 194 , 222 , 209 ) ;
граница: 3пк чврста ргб ( 84 , 73 , 116 ) ;
ширина: 300пк;
висина: 30пк;
величина фонта: велика;
}
Као што можете видети из резултата, падајући мени је креиран и успешно стилизован коришћењем ХТМЛ-а и ЦСС-а:
У горе наведеном излазу може се видети да је креиран падајући мени и омогућава вам да изаберете било коју опцију према вашим жељама. Прелазимо на следећи одељак, где ћемо променити боју изабране опције користећи ЦСС.
Како да промените боју изабране опције помоћу ЦСС-а?
Да бисте променили боју изабране опције менија, „ :цхецкед ” се користи селектор ЦСС-а. :цхецкед је елемент псеудо-класе који се може повезати само са елементима типа уноса, као што је „ опција ”, “ поље за потврду ', и ' радио дугмад ”. Углавном се користи за промену понашања изабране вредности ових елемената.
Синтакса
Синтакса :цхецкед је:
елемент_наме:цхецкед {ЦСС декларације;
}
У ЦСС декларацијама можете написати код за изабрану вредност опције, поље за потврду и радио.
Сада идите на мени и промените боју изабране опције помоћу селектора :цхецкед. Да бисмо то урадили, користићемо „ опција ” да бисте приступили опцијама креираним у менију и „ :цхецкед ” псеудо-класе на изабрану опцију менија. Омогућава промену понашања изабране опције. Затим ћемо подесити боју изабране опције као „ ргб(246, 250, 0) ” и позадину изабране опције као „ ргб(5, 26, 1) ”:
опција: означено {боја: ргб ( 246 , 250 , 0 ) ;
боја позадине: ргб ( 5 , 26 , 1 ) ;
}
Као што можете видети у следећем излазу, позадина и боја изабране опције су промењене:
Објаснили смо начин промене боје изабране опције помоћу ЦСС-а.
Закључак
„ :цхецкед ” селектор псеудо-класе се користи за промену боје изабране опције. :цхецкед се користи заједно са „ опција ” падајућег менија, а након тога можете подесити боју изабране опције. У овом приручнику је објашњен начин креирања и стилизовања падајућег менија, а затим је приказана процедура за промену боје изабране опције помоћу ЦСС-а.