在MINI UI控件上附加自定义class样式类

kisssk

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

可以的.
但是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

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

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

kisssk

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

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

1. .border-red.mini-textbox{
   
2.           width:250px;
   
3.         }
   
4.         
   
5.         .border-red.mini-textbox-border{
   
6.           border:1px solid red;
   
7.         }

复制代码

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

dforce

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

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

kisssk

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

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