核心提示：由于原生的input的单选和多选框太丑，博主实际开发过程中用到下面两种方法来修改样式，另外还有ng-pattern校验输入框,效果如下：代码如下：!DOCTYPE htmlhtmlheadmeta c...
由于原生的input的单选和多选框太丑，博主实际开发过程中用到下面两种方法来修改样式，另外还有ng-pattern校验输入框,
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>试验</title>
<script type="text/javascript" src="https://s.zys.me/js/ng/angular.js"></script>
<style>
.custom-checkbox {
position: relative;
}
.custom-checkbox input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
margin: 0;
}
.custom-checkbox input:hover + label {
box-shadow: 0 0 5px #70b0c4;
}
.custom-checkbox label {
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
border: 1px solid #70b0c4;
display: inline-block;
vertical-align: middle;
}
.custom-checkbox input[type="checkbox"]:checked + label::after {
content: '✓';
font-size: 16px;
font-weight: bold;
color: #70b0c4 !important;
}
.custom-radio {
position: relative;
}
.custom-radio input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
margin: 0;
}
.custom-radio input:hover + label {
box-shadow: 0 0 5px #70b0c4;
}
.custom-radio label {
display: inline-block;
box-sizing: border-box;
border: solid 1px #70b0c4;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
border-radius: 50%;
vertical-align: middle;
}
.custom-radio input[type="radio"]:checked + label {
padding: 2px;
background-color: #70b0c4;
background-clip: content-box;
}
.custom-select {
position: relative;
z-index: 0;
}
.custom-select select {
border: solid 1px #ddd;
border-radius: 2px;
background: transparent;
height: 30px;
min-width: 80px;
line-height: 100%;
padding-left: 5px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 14px;
cursor: pointer;
}
.custom-select select::-ms-expand {
display: none;
}
.custom-select label {
display: inline-block;
position: absolute;
z-index: -1;
right: 5px;
top: -4px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 8px solid #70b0c4;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.error{
border:1px solid red;
}
</style>
</head>
<body ng-controller="TestCtrl">
<form name="postData">
<p>
<h2>单选</h2>
<label>
<span class="custom-radio">
<input type="radio" ng-value="'1'" name="nuclearType" ng-model="isBool"/><label></label>
</span>是
</label>
<label>
<span class="custom-radio">
<input type="radio" ng-value="'0'" name="nuclearType" ng-model="isBool"/><label></label>
</span>否
</label>
</p>
<p>
<h2>多选</h2>
<label>
<span class="custom-checkbox">
<input type="checkbox" ng-model="a" /><label></label>
</span> 书
</label>
<label>
<span class="custom-checkbox">
<input type="checkbox" ng-model="b"/><label></label>
</span> 笔
</label>
</p>
<p>
<h2>使用filter模拟input单选或多选</h2>
<img class="cursor-pointer" ng-src="images/{{december | checkboxImg}}" ng-init="december=false" ng-click="december=!december">
</p>
<p>
<h2>使用ng-pattern 校验输入框</h2>
<input name="phone" ng-pattern="/[0-9]{11}/" ng-class="{true:'error'}[postData.phone.$invalid]" type="text" ng-model="tel">
</p>
</form>
<script>
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
$scope.isBool = "1";
$scope.a = true;
})
.filter("checkboxImg", function(){
return function(flag) {
if(flag !== null){
return flag? "sel.png": "check.jpg";
} else{
return ""
}
}
})
angular.bootstrap(document.documentElement, ['app']);
</script>
</body>
</html>
