CODEWITHSUNDEEP
cssjquery-mobile
sunmoon
sunmoon

Reputation: 67

Transparent and borderless text-input

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.

Upvotes: 4

Views: 18911

Answers (2)

Quang Quach
Quang Quach

Reputation: 168

When using jQuery Mobile, you need to disable its auto-enhanced as follow

HTML

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

CSS

input, input:hover, input:focus, input:active {
  background: transparent;
  border: 0;
  border-style: none;
  border-color: transparent;
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

Upvotes: 3

Gajotres
Gajotres

Reputation: 57309

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.

Upvotes: 8

Related Questions