我正在使用cakephp 3进行搜索表单,我必须使用单选按钮。
我不知道如何用php制作它们。这是我目前所看到的:
input[type=radio] + label:before {
display: inline-block;
vertical-align: middle;
margin: -2px 8px 0 0;
height: 23px;
width: 23px;
border-radius: 50%;
border: 2px solid #777;
background-color: #fff;
background-clip: padding-box;
content: "";
transition: box-shadow .01s .39s ease-in-out, background .4s ease-in-out;
}
input[type=radio]:checked + label:before {
box-shadow: inset 0 0 0 2px #fff;
border: solid #F44336;
background-color: #F44336;
transition: background .4s ease-in-out;
}
<div class="col-sm-3 text-center">
<input type="radio" name="radio" id="radio1" value="1">
<label for="radio1">Product Shots</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" name="radio" id="radio3" value="3">
<label for="radio3">Video</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" name="radio" id="radio2" value="2">
<label for="radio2">Printing Materials</label>
</div>
标签旁边的单选按钮不出现:
<div class="col-sm-3 text-center">
<?= $this->Form->input('multimedia_type_id', ['type' => 'radio',
'name' => 'radio',
'label' => false,
'options' => $multimediaTypes
]); ?>
</div>
创建CAKEPHP3单选按钮,
语法为:
Cake'View'Helper'FormHelper::radio(string $fieldName, array $options, array $attributes)
value
-选中该单选按钮时的值label
-布尔值,指示是否为小部件标记hiddenField
-布尔值,表示是否希望radio()
的结果包含一个值为"的隐藏输入。disabled
-设置为true或disabled禁用所有单选按钮。-
empty
-设置为true,以创建一个输入值"作为第一个选项。当为true时,无线电标签将为'empty
'。将此选项设置为字符串以控制标签值。
通常$options是一个简单的键=>值对。但是,如果您需要在单选按钮上放置自定义属性,您可以使用扩展格式:
echo $this->Form->radio(
'favorite_color',
[
['value' => 'r', 'text' => 'Red', 'style' => 'color:red;'],
['value' => 'u', 'text' => 'Blue', 'style' => 'color:blue;'],
['value' => 'g', 'text' => 'Green', 'style' => 'color:green;'],
]
);
// Will output
<input type="hidden" name="favorite_color" value="">
<label for="favorite-color-r">
<input type="radio" name="favorite_color" value="r" style="color:red;" id="favorite-color-r">
Red
</label>
<label for="favorite-color-u">
<input type="radio" name="favorite_color" value="u" style="color:blue;" id="favorite-color-u">
Blue
</label>
<label for="favorite-color-g">
<input type="radio" name="favorite_color" value="g" style="color:green;" id="favorite-color-g">
Green
</label>
查看CakePHP3文档
这行得通:
input[type=radio] + label:before {
display: inline-block;
vertical-align: middle;
margin: -2px 8px 0 0;
height: 23px;
width: 23px;
border-radius: 50%;
border: 2px solid #777;
background-color: #fff;
background-clip: padding-box;
content: "";
transition: box-shadow .01s .39s ease-in-out, background .4s ease-in-out;
}
input[type=radio]:checked + label:before {
box-shadow: inset 0 0 0 2px #fff;
border: solid #F44336;
background-color: #F44336;
transition: background .4s ease-in-out;
}
<div class="col-sm-3 text-center">
<input type="radio" id="1" name="multimedia_type_id" value="1"/>
<label for="1">Product Shots</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" id="2" name="multimedia_type_id" value="2"/>
<label for="2">Video</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" id="3" name="multimedia_type_id" value="3"/>
<label for="3">Printing Materials</label>
</div>