UI网格自定义复选框样式

Question

我正在尝试使用UI-Grid中的复选框进行一些样式设置，但它似乎没有正常工作。请注意，复选框仍显示在我的样式叠加层下方，单击第3个复选框似乎会激活叠加复选框样式。

有没有办法用我的叠加替换列中出现的复选框并使用它？或者有人有想法让这个工作正常吗？

http://plnkr.co/edit/fMMq71849pxE0NLcfuVJ

cellTemplate: '<div class="ui-grid-cell-contents">' +
                                         '  <input type="checkbox" class= "Check" id="Check" name="select_item" value = "true" ng-model="row.entity.ValidateProvider"/>' +
                                         '  <label for="roundedOne" />' +
                                         '  </div>'

我想让他们看起来像这个网站顶部的第4位：

http://cssdeck.com/labs/css-checkbox-styles

Answer 1

没有简单的方法可以做到这一点。

在UI网格中，我们通常使用HTML输入控件的blur事件来结束单元格编辑，这应该是最好的用户体验。但是目前没有合适的CSS支持来设置自定义复选框样式，并且可以同时正确地调度blur事件。在上面提到的例子中，你可以看到css规则使`blur＆＃39;不可能的：

input[type=checkbox] { visibility: hidden; }

有一个非标准的css属性appearance可供使用，此时可以使用，而不是visibility和其他，但需要仔细测试浏览器。任何IE都不支持。

此外，应使用editableCellTemplate而不是cellTemplate进行编辑。