In my current project, I am utilizing jQuery mobile and have included three buttons. To customize the style of these buttons and override the default jQuery button CSS, I applied my own CSS. However, I encountered an issue where a small white background was still visible despite my attempts to change it. Upon inspecting the page, I discovered that this background belonged to the jQuery mobile button, making it difficult for me to override. Here is the code snippet I tried: http://jsfiddle.net/naveennsit/5DDBD/
.ui-grid-c .ui-btn-inner {
background: #2b6dbc;
color: #FFFFFF;
border: 1px solid #000;
border-radius: 3px;
width: 100px;
text-shadow: none;
margin-left: 4px;
}
Upon using the DOM inspector, removing the line background: #2b6dbc revealed the underlying jQuery mobile button.
Any suggestions on how I can successfully remove this unwanted background?
Additionally, after applying the above styles, there seems to be an issue with color changes upon focus and unfocus.
.ui-btn-up-c{background:#2b6dbc; color:#FFFFFF; border:1px solid #000; border-radius:3px; width:100px; text-shadow:none; margin-left:4px;}