将边框属性添加到span元素

Question

我有一个span元素（一个由角度用户界面评级（底部链接到Plunkr）创建的星级）。我想在整个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>




Answer 1

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

css lang-css prettyprint-override">.ng-scope h4 + span{
border: 1px solid #ccc;
padding:5px;
}

Answer 2

要向跨距添加边框，可以执行以下操作

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

Answer 3

将跨度设为内联块元素，并对其应用边框

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>