html - Cannot remove the styling of the input field in jquery mobile

Question

HTML:

My name is
<input type="text" class="amountBox" value="sam" readonly />

CSS:

.amountBox[readonly] {
    -webkit-box-shadow: none; /*{b-active-background-color}*/
       -moz-box-shadow: none; /*{b-active-background-color}*/
            box-shadow: none; /*{b-active-background-color}*/
    -webkit-appearance: none;
}

i cannot remove whats around it, be it the border or shadow,i cant remove it.I dont want any styling..But no way i can achieve it.any help?

Demo: http://jsfiddle.net/B2qfL/5/

Answer 1

Add data-role="none" attribute to elements you don't want to be styled by JQM.

<input type=text data-role=none />