将border属性添加到span元素

我有一个span元素（由Angular-UI Rating创建的星级评分（链接到底部的Plunkr）。我想将边框应用于整个span（rating）元素，以便我可以（有类似于has-error表单验证），我打算通过在span元素上应用一个红色边框来做到这一点将border属性添加到span元素

我该怎么做？

调节器：https://plnkr.co/edit/m0H2DZwwwtS2deMB75ON?p=preview

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) { 
 
    $scope.rate = 7; 
 
    $scope.max = 10; 
 
    $scope.isReadonly = false; 
 

 
    $scope.hoveringOver = function(value) { 
 
    $scope.overStar = value; 
 
    $scope.percent = 100 * (value/$scope.max); 
 
    }; 
 

 
    $scope.ratingStates = [ 
 
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'}, 
 
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'}, 
 
    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'}, 
 
    {stateOn: 'glyphicon-heart'}, 
 
    {stateOff: 'glyphicon-off'} 
 
    ]; 
 
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div ng-app="ui.bootstrap.demo"> 
 
    <div ng-controller="RatingDemoCtrl"> 
 
    <h4>Default</h4> 
 
    <span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span> 
 
    </div> 
 
</div>

来源

2016-12-05 Penkey Suresh

你可以请你出示你的代码吗？ –

为评分元素添加了一个跳板我想要一个挡板 –

制作跨度内嵌块并添加边框 – Geeky

使跨度为内联块元件并应用边缘，将其

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function($scope) { 
 
    $scope.rate = 7; 
 
    $scope.max = 10; 
 
    $scope.isReadonly = false; 
 

 
    $scope.hoveringOver = function(value) { 
 
    $scope.overStar = value; 
 
    $scope.percent = 100 * (value/$scope.max); 
 
    }; 
 

 
    $scope.ratingStates = [{ 
 
    stateOn: 'glyphicon-ok-sign', 
 
    stateOff: 'glyphicon-ok-circle' 
 
    }, { 
 
    stateOn: 'glyphicon-star', 
 
    stateOff: 'glyphicon-star-empty' 
 
    }, { 
 
    stateOn: 'glyphicon-heart', 
 
    stateOff: 'glyphicon-ban-circle' 
 
    }, { 
 
    stateOn: 'glyphicon-heart' 
 
    }, { 
 
    stateOff: 'glyphicon-off' 
 
    }]; 
 
});

span { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div ng-app="ui.bootstrap.demo"> 
 
    <div ng-controller="RatingDemoCtrl"> 
 
    <h4>Default</h4> 
 
    <span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span> 
 
    </div> 
 
</div>

希望它可以帮助

来源

2016-12-05 07:55:24 Geeky

添加边框的跨度，你可以做以下

span { 
    border: 1px solid blue; 
    display: block; 
}

来源

2016-12-05 07:49:34 Shani

@Penkey苏雷什添加以下CSS。您可以根据需要调整边框颜色和填充。

.ng-scope h4 + span{ 
 
border: 1px solid #ccc; 
 
padding:5px; 
 
}

来源

2016-12-05 07:50:51 sanjay

CSS：

.redborder 
{ 
color:red; 
}

HTML代码：

<p>this is sample text <span class="redborder">This is span text</span></p>

来源

2016-12-05 07:51:04

@Geeky我们是否认真地要求下面的CSS工作正常时长码？只是要求学习的目的。

.ng-scope h4 + span{ 
 
border: 1px solid #ccc; 
 
padding:5px; 
 
}

来源

2016-12-05 08:01:13 sanjay

Yaa您也可以在代码中添加边框，因为它只是一行代码，并不重要...考虑跨度是否有多行内容，如何通过添加显示行将边界添加到跨度效果：内联块并将其删除...看到这里的区别http://codepen.io/sahithiK/pen/ObvxvJ – Geeky

@Geeky谢谢你的努力吨..我得到了你......干杯！ – sanjay

风格的边框由应用这样

跨度{边境一些CSS属性：2px的红色虚线;/*边框宽度的边框样式边框颜色* /}

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) { 
 
    $scope.rate = 7; 
 
    $scope.max = 10; 
 
    $scope.isReadonly = false; 
 

 
    $scope.hoveringOver = function(value) { 
 
    $scope.overStar = value; 
 
    $scope.percent = 100 * (value/$scope.max); 
 
    }; 
 

 
    $scope.ratingStates = [ 
 
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'}, 
 
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'}, 
 
    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'}, 
 
    {stateOn: 'glyphicon-heart'}, 
 
    {stateOff: 'glyphicon-off'} 
 
    ]; 
 
});

span { 
 
    border :2px dotted red; 
 
    }

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div ng-app="ui.bootstrap.demo"> 
 
    <div ng-controller="RatingDemoCtrl"> 
 
    <h4>Default</h4> 
 
    <span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span> 
 
    </div> 
 
</div>

来源

2016-12-05 08:05:37

将border属性添加到span元素

回答

相关问题