透明和无边框文本输入

sun*_*oon 3 css jquery-mobile

我尝试创建包含用户名和密码的登录页面,但我想要圆形分组输入(用户名和密码).我试过这个:

border: none;
border-color: transparent;
Run Code Online (Sandbox Code Playgroud)

使用CSS,但仍然边界可能是错误.

Gaj*_*res 6

解决方案1

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

使用的CSS:

.ui-input-text {
    border: none !important;
    border-color: transparent !important;
}
Run Code Online (Sandbox Code Playgroud)

解决方案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>
Run Code Online (Sandbox Code Playgroud)

CSS

#wrapper .ui-input-text {
    border: none;
    border-color: transparent;
}
Run Code Online (Sandbox Code Playgroud)

更多信息

使用jQuery Mobile时,您需要了解最终的HTML内容是否已增强,并且看起来不像以前的内容.当重写类时!必须使用重要的.在这里阅读更多相关信息.

  • 有两种方法可以避免!重要.1.在jQuery Mobile结构文件中手动更改输入css,2.将输入字段包装到div(或任何其他标记)中,为该标记赋予一个id并使用它像#wrapper_id .ui-input-text,此解决方案不会要求!重要. (2认同)