PDA

View Full Version : Applying a box-shadow to a textfield



kashim
29 Feb 2012, 1:40 AM
I have a textfield with a fieldLabel. I want to show a box shadow around the textbox part only. If I do the following,

{xtype: 'textfield', fieldLabel: 'Text', labelWidth: 50, width: 700, margin: '15 0 0 10',
style: 'box-shadow: 5px 5px 2px #888888;'},

the shadow is being applied on the fieldLabel part as well.

How do I apply the shadow over the textbox only.

TIA

mitchellsimoens
29 Feb 2012, 7:24 AM
Use CSS instead of the style config. Assign the field with a CSS class in the cls config. Then in your CSS you can target the input.

kashim
2 Mar 2012, 3:18 AM
Thanks. I found fieldCls to work.

{xtype: 'textfield', fieldLabel: 'Text', labelWidth: 50, width: 700, margin: '15 0 0 10',
fieldCls: 'something'},

..
.something
{
box-shadow: 5px 5px 2px #888888;
}