Transparent and borderless text-input

Question

I try to create login page contains username and password but i want rounded grouped inputs(username and password). I tried this:

border: none;
border-color: transparent;

using css, but still border is coming what might be error.

Answer 1

Solution 1

Working example: http://jsfiddle.net/Gajotres/95Paz/

CSS used:

.ui-input-text {
    border: none !important;
    border-color: transparent !important;
}

Solution 2

Working example: http://jsfiddle.net/Gajotres/95Paz/1/

HTML

<div id="wrapper">
    <input type="text" style="border:none" autocorrect="off" autocapitalize="off"  name="username" id="username" placeholder="Username or Email" />
    <input type="password" style='border-radius:5px;' id="password" placeholder="Password" />
</div>

CSS

#wrapper .ui-input-text {
    border: none;
    border-color: transparent;
}

More info

When working with jQuery Mobile you need to understand that final HTML content is enhanced and it don't look like previous one. Also when overrding classes !important must be used. Read more about it here.