css - 为内部元素设置 CSS 样式

Question

你能告诉我如何将 css 应用于下面提到的元素吗？谢谢。

这是 Fiddle

注意:只需单击编辑按钮。之后它会显示日期组件。我需要降低该组件的高度。

我已经试过了，如下所示。但是它不起作用:(

.editable-wrap editable-bsdate .editable-controls .input-group .form-control {
    height: 24px !important;
}

更新:

html 组件是这样的:

<td>
  <span editable-bsdate="comment.date" e-datepicker-popup="MM-dd-yyyy" e-ng-click="vm.open($event,'$data')" e-is-open="vm.opened.$data" e-name="date" e-form="commentForm">
     {{ comment.date | date:'MM-dd-yyyy' }}
   </span>
 </td>

Answer 1

通过添加这个类它可以工作。

该组件具有影响其大小以及设置高度的填充。

/* input */
.input-group input {
  padding: 2px;
  height: 26px;
}

/* input calender button */
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
  padding: 2px;
}

Updated fiddle