div+css中将默认的单选按钮样式（圆的）变成正方形的样式怎么写?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div+css中将默认的单选按钮样式（圆的）变成正方形的样式怎么写?相关的知识，希望对你有一定的参考价值。
1、首先打开hbuilder软件，新建几个默认的复选框。
2、然后在上方的style标签设置input的样式，先设置input的display属性为none，将默认的单选框去掉，在设置一下各个单选框的margin的距离。
3、接着在下方继续设置样式，设置label标签的before和after伪元素，将原有before的单选框选中状态的属性“checked+label”设置变为红色实心框，同时未选中的状态的“label::after”为白色空心方框。
4、最后打开浏览器，即可看到设置好的样式，其中被选中的是红色的实心方框，没被选择的则是没有颜色的方框。
要实现样式替换的话，可以用JS监听点击行为，然后替换不同的图片或样式。本回答被提问者和网友采纳 参考技术B 用js吧 csss搞不定的
使用带角度的单选按钮更新不同的模型
【中文标题】使用带角度的单选按钮更新不同的模型【英文标题】：Updating a different model using radio buttons with angular 【发布时间】：2015-03-24 20:03:30 【问题描述】：我知道这可能很容易！如果选择了“站点”单选按钮，我有两个单选按钮可以显示带有输入字段的 div。文本输入字段设置为名为“sitePostcode”的 ng-model。我想要实现的是，如果选择了“解决方案”单选按钮，那么“站点邮政编码”模型中将包含“解决方案”。如果选择了 'site' 单选按钮，则 'sitePostcode' 将包含曾经输入到输入框中的内容。
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
我认为单选按钮也应该是“sitePostcode”模型，但是当我尝试这样做并在输入字段中输入文本时，随着模型值从“site”更改，div 会消失。干杯
【问题讨论】：
【参考方案1】：您可以查看product.group的变化，并根据它更改sitePostcode。
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
</head>
<body data-ng-app="app" data-ng-controller="MainController">
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
<script>
var app = angular.module('app', []);
app.controller("MainController", function($scope)
var customPostcode = '';
$scope.$watch('product.group', function (newVal, oldVal)
if (newVal === 'Solution')
customPostcode = $scope.sitePostcode;
$scope.sitePostcode = 'Solution';
else
$scope.sitePostcode = customPostcode;
);
);
</script>
</body>
</html>【讨论】：
【参考方案2】：单选按钮应该属于一个组。将“name”属性添加到输入字段并赋予它们相同的值。
<input name="group1" type="radio" ng-model="product.group" value="Solution">Solution
<input name="group1" type="radio" ng-model="product.group" value="Site">Site
单选按钮在 Angularjs 中可能很棘手。这是他们如何工作的一个很好的例子：http://jsfiddle.net/K9MLk/246/。
【讨论】：
【参考方案3】：我认为最好的方法是检查控制器中的product.group 值并将sitePostcode 设置为Solution。
另一种方法是按照您的建议。您可以将单选按钮的ng-model 设置为sitePostcode，并将您的支票更改为ng-show="product.group != 'Solution'"。这是假设用户不会在输入字段中键入 Solution。
<div>
<input type="radio" ng-model="sitePostcode" value="Solution">Solution
<input type="radio" ng-model="sitePostcode" value="Site">Site
</div>
<div ng-show="product.group != 'Solution'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
但正如我所说，最好在控制器中执行此操作。
【讨论】：
以上是关于div+css中将默认的单选按钮样式（圆的）变成正方形的样式怎么写?的主要内容，如果未能解决你的问题，请参考以下文章