使用CSS为Moodle表单中的选择器着色


Using CSS to colour selectors in a Moodle form

我以Moodle 3.0的形式创建了一个选择器(在Moodle中使用formlib.php)。我想更改每个选择器的颜色。例如,我创建了一个选择器,如下所示:

$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

我想把"列"选项设置为蓝色,把"行"选项设置成红色。这可能吗?

我用谷歌搜索了一下,但没有看到任何有用的信息。

这与moodle无关,它只是html和css

你可以通过

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);
}

如何更改选择框选项的背景颜色?

您可以在属性中添加一些基本样式,这些样式在带有元素的样式属性中打印出来。

或者,您可以为这个select选项分配一个css类,然后创建一个具有快速表单的html元素,并在其中编写样式表。

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

这样它就会起作用。

我找到了。我们应该在Moodle文件夹中创建一个文件"styles.css"。然后在这个文件中,我们应该写这样的CSS代码:

#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;
}

我在moodle的"moodle ''report"中创建了"chartreport"文件夹,"Draw_chart"是我的页面,这个选择器就在其中。

*注意:您必须清除Moodle中的所有缓存才能看到主题的更改。

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