CODEWITHSUNDEEP
phpcssmoodle
z.gomar
z.gomar

Reputation: 370

Using CSS to colour selectors in a Moodle form

I created a selector in form of Moodle 3.0 (with formlib.php in Moodle). I want to change the color of each selector. For example, I created a selector as below:

$mform->addElement('header', 'ChartOptions', get_string('ChartOptions','report_chartreport'));

$select1 = $mform->addElement('select', 'TypeofChart', get_string('SelectTypeofChart','report_chartreport'), ['column','Line']);

$mform->setDefault('TypeofChart', 'column');        //Default value

...and I want to set the 'column' option as blue and set the 'Line' option as red. Is this possible?

I searched using Google but don't see any helpful information.

Upvotes: 0

Views: 836

Answers (2)

developerCK
developerCK

Reputation: 4506

This is not related to moodle, it is only html and css

you can do this via

select option {
margin:40px;
background: rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

select option[val="line"]{
background: rgba(100,100,100,0.3);
}

select option[val="column"]{
background: rgba(200,200,200,0.3);
}

How to change select box option background color?

You can add some basic style in attribute, that is printed in style attribute with element.

or you can assign a css class to this select option and then create a html element with quick form and write the style sheet in that.

$mform->addElement('html', '<style>.cl{<>}.hr{<>}</style>');

so that it would work.

Upvotes: 1

z.gomar
z.gomar

Reputation: 370

I found it. We should create a file 'styles.css' in our Moodle folder. then in this file we should write CSS codes like this:

#page-report-chartreport-Draw_chart #id_TypeofChart option[value='0'] {
  color: black;
  background-color: blue;
}

#page-report-chartreport-Draw_chart #id_TypeofChart option[value='1'] {
  color: black;
  background-color: red;
}

I create 'chartreport' folder in "moodle\report" of Moodle and 'Draw_chart' is my page that this selector is in that.

*Notice: you must Purge all cache in Moodle for see the change in theme.

https://moodle.org/mod/forum/discuss.php?d=325395#p1307734

Upvotes: 0

Related Questions