Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

How to change selectMenu background and font color

I tried the following in CSS asset:

.C_selectMenu{
margin-left: auto !important;
margin-right: 2% !important;
margin-top: 2% !important;
margin-bottom: 2% !important;
width: 100% !important;
height: 5% !important;
display: inline-block !important;
padding: 4px 3px 5px 5px !important;
outline: none !important;
box-shadow: inset 2px 2px 3px #ddd8dc !important;
color: #000000 !important;
background-color: #ffffff !important;
}

There is inset shadow which shows it as engraved in the background.
1) I need it to show lower than the background (engraved) similar to inputText way. 2) The background color I need it to be white and the font and the icon black., the one is showing is still flat-ui theme's clolor. which has white font and green background.
3) I need checkBox to show with white/transparent background such that it shows as label

How can I change this? Image

This is how I need to show the selectMenu and the checkBox:

Image

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

How to change selectMenu background and font color

Hello Hawk,

1)For the selectMenu.
You should use the styles not for class .C_selectMenu. Use the following code:

pre.C_selectMenu a.ui-btn{
outline: none !important;
box-shadow: inset 1px 1px 0px #ddd8dc !important;
color: #000000 !important;
text-shadow: none;
background: #ffffff !important;
text-align: left;
border: 1px solid #eee!important;
font-weight: normal!important;
border-radius:7.5px!important;
}/pre

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

How to change selectMenu background and font color

For icons
If you will upload your picture to icon, then use the following:

pre.C_selectMenu a.ui-btn:after {
background: url('../image/icon.png');
background-size: cover;
}/pre
For selectMenuList
pre.ui-popup-container .ui-selectmenu-list a{
border: none!important;
background: none!important;
color: #000!important;
font-weight: normal!important;
}/pre

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

How to change selectMenu background and font color

2) For checkBox
pre.C_checkBox label {
background: #fff!important;
color: #000!important;
border: none!important;
}/pre
for checkbox
pre.C_checkBox .ui-checkbox-off:after{
background:#fff!important;
border:1px solid #000!important;
}

.C_checkBox .ui-checkbox-on:after{
background: url('../image/icon.png')!important;
background-size: cover;
border:1px solid #eee!important;
}/pre
where icon.jpg-these are your pictures, uploaded in Media Manager

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

How to change selectMenu background and font color

Hi,

For the checkBox, I tried the following:

code
.C_checkBox .ui-checkbox-on:after{
background: url('../../../resources/image/q9.png')!important;
background-size: cover;
border:1px solid #eee!important;
}
/code

and the following:
code
.C_checkBox .ui-checkbox-on:after{
background: url('../image/q9.png')!important;
background-size: cover;
border:1px solid #eee!important;
}
/code

When I tick the checkbox, the image does not show. Something is missing about the uploading the image 'q9.png':

Image

Image

obullei
Posts: 0
Joined: Thu Jun 05, 2014 12:17 am

How to change selectMenu background and font color

Hello!

Please try to use this code:

code.C_checkBox .ui-checkbox-on:after{
background: url('../../../resources/image/q9.png')!important;
background-size: cover!important;
border:1px solid #ababab!important;
}/code

Return to “Issues”