Hi,
I want to give a rounded edged effect to a textbox with the following css style
.searchbox
{
-moz-box-sizing: border-box;
background-image: url(images/search_picker.png) ;
background-repeat:no-repeat;
background-position:right;
border-radius: 12px 12px 12px 12px;
height: 19px;
padding: 2px 18px 1px 22px;
width: 100%;
margin-bottom: -1px;
color: #000000;
text-shadow: 0 1px 1px transparent;
z-index: 0;
}
This does give a rounded textbox. However, as soon as I click in the textbox, the style 'searchbox' becomes 'searchboxFocused' for this textbox and all the css is gone. I tried to put the same css styling in the css file for both 'searchbox' and 'searchboxFocused' and onclick event of the textbox handler I change the style to 'searchboxFocused'. But even then on clicking on the textbox, it appends 'Focused' to this (ie. 'searchboxFocused' becomes 'searchboxFocusedFocused') and the style dissapers.
Can you please suggest how can I override this css so that the style is retained?
I want to give a rounded edged effect to a textbox with the following css style
.searchbox
{
-moz-box-sizing: border-box;
background-image: url(images/search_picker.png) ;
background-repeat:no-repeat;
background-position:right;
border-radius: 12px 12px 12px 12px;
height: 19px;
padding: 2px 18px 1px 22px;
width: 100%;
margin-bottom: -1px;
color: #000000;
text-shadow: 0 1px 1px transparent;
z-index: 0;
}
This does give a rounded textbox. However, as soon as I click in the textbox, the style 'searchbox' becomes 'searchboxFocused' for this textbox and all the css is gone. I tried to put the same css styling in the css file for both 'searchbox' and 'searchboxFocused' and onclick event of the textbox handler I change the style to 'searchboxFocused'. But even then on clicking on the textbox, it appends 'Focused' to this (ie. 'searchboxFocused' becomes 'searchboxFocusedFocused') and the style dissapers.
Can you please suggest how can I override this css so that the style is retained?
Comment