ExtJS 4 - 文本字段的圆角不起作用答案

【问题标题】：ExtJS 4 - rounded corner for textfield not workingExtJS 4 - 文本字段的圆角不起作用
【发布时间】：2014-12-12 15:01:20
【问题描述】：

我有一个如下定义的文本字段：

xtype: 'textfield',
x: 490,
y: 365,
cls: 'textarea',
height: 40,
width: 300,
fieldLabel: 'Label',
hideEmptyLabel: false,
hideLabel: true

我的 CSS 是这样定义的：

.textarea {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

但是，文本字段仍然有角。我认为我做错了什么，我无法发现它。很感谢任何形式的帮助。谢谢。

【问题讨论】：

标签： css extjs extjs4 extjs4.2

【解决方案1】：

试试这个：-

.textarea .x-form-text {
   border-radius: 5px;
}

您需要为<input> 元素提供边框半径属性，但您试图将其设置为包含<input> 元素的组件元素。

【讨论】：

【解决方案2】：

你也可以试试fieldStyle:

{
    xtype: 'textfield',
    x: 490,
    y: 365,
    cls: 'textarea',
    height: 40,
    width: 300,
    fieldLabel: 'Label',
    hideEmptyLabel: false,
    hideLabel: true,
    fieldStyle: {
        borderRadius: 5 //here
    }
}

当然，这只适用于您创建的组件。但如果你想让这影响所有带有textarea cls 的字段，请尝试改用fieldCls。

【讨论】：