jQuery MiniUI

标题: 在MINI UI控件上附加自定义class样式类 [打印本页]

作者: kisssk 时间: 2017-3-19 19:00:21 标题: 在MINI UI控件上附加自定义class样式类

hi，我使用mini ui的相关控件时（例如textbox控件），在同一个功能页面中，需要对多个 textbox 的控件样式进行控制，例如姓名和地址的控件的边框为红色，其他的textbox控件的边框为绿色时，发现mini ui控件上无法通过自行编写的 class 样式进行边框颜色和长度的定制（希望还是要通过class而不是行内样式，因为应用涉及到换肤，行内样式不能满足换肤的要求），例子如下：
<style>
.border-red{border:1px solid red;width:120px;}
.border-green{border:1px solid green; width:60px}
</style>

红色边框的输入框1：<input id="tb1" class="mini-textbox border-red" />
红色边框的输入框2：<input id="tb2" class="mini-textbox border-red"/>
绿色边框的输入框1：<input id="tb3" class="mini-textbox border-green" />

运行的效果其实并没有达到期望的边框颜色和宽度的设置，请问各位专家应该如何处理才能满足定制样式的需求？？谢谢~

作者: dforce 时间: 2017-3-20 09:49:22

可以的.
但是MiniUI控件都是比较复杂的元素块
比如修改边框的话，需要修改
.border-red .mini-textbox-border{
border:1px solid red;
}
.border-red.mini-textbox
      {
         width:200px;
         }
<input id="tb1" class="mini-textbox border-red" />

作者: kisssk 时间: 2017-3-20 10:12:06

dforce 发表于 2017-3-20 09:49
可以的.
但是MiniUI控件都是比较复杂的元素块
比如修改边框的话，需要修改

好的，我验证一下，谢谢~

作者: kisssk 时间: 2017-3-20 17:41:47

dforce 发表于 2017-3-20 09:49
可以的.
但是MiniUI控件都是比较复杂的元素块
比如修改边框的话，需要修改

版主您好，我按照你提供的方式进行了样式的定义，如下：

.border-red.mini-textbox{
width:250px;
}
.border-red.mini-textbox-border{
border:1px solid red;
}

复制代码

text-box控件宽度能够设置成功，但是border设置为红色边框的却不能生效，还是使用默认的样式，应该如何处理，谢谢。

作者: dforce 时间: 2017-3-20 18:37:43

kisssk 发表于 2017-3-20 17:41
版主您好，我按照你提供的方式进行了样式的定义，如下：text-box控件宽度能够设置成功，但是border设置为 ...

请注意空格.border-red .mini-textbox-border

作者: kisssk 时间: 2017-3-20 21:31:19

dforce 发表于 2017-3-20 18:37
请注意空格.border-red .mini-textbox-border

已经验证成功，谢谢版主~

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)