透明和无边框文本输入

Question

我尝试创建包含用户名和密码的登录页面，但我想要圆形分组输入（用户名和密码）。我试过这个：

border: none;
border-color: transparent;

使用css，但仍有边框可能出现错误。

Answer 1

解决方案1 ​​

工作示例：http://jsfiddle.net/Gajotres/95Paz/

使用的CSS：

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

解决方案2

工作示例：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;
}

更多信息

使用jQuery Mobile时，您需要了解最终的HTML内容是否得到了增强，并且它看起来不像以前的内容。当重写类时！必须使用重要的。详细了解 here 。

Answer 2

使用jQuery Mobile时，您需要禁用其自动增强功能，如下所示

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;
}