覆盖属性 CSS3 Jquery Mobile答案

【问题标题】：Override properties CSS3 Jquery Mobile覆盖属性 CSS3 Jquery Mobile
【发布时间】：2013-02-18 08:12:47
【问题描述】：

您好，我正在尝试覆盖输入中的属性，因为我正在创建一个 Web 站点，并且我需要普通 pc 的设计（Web 响应式）。例如 nex 登录表单：

<!DOCTYPE html> 
<html> 
<head> 
<title>Example </title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="resouce/css/loggin.css" />

</head> 
<body> 

<div data-role="page">

<div data-role="header">
    <h1>Loggin</h1>
</div><!-- /header -->

<div id="formulario">
    <form method="POST" action="" data-ajax="false">
        <label for="usuarioLogin">Username:</label><br>
        <input type="text" name="usuarioLogin" id="usuarioLogin" /><br>
        <label for="passwordLogin">Password:</label><br>
        <input type="password" name="passwordLogin" id="passwordLogin" /><br>
        <button id="ingresarLogin" type="submit" data-theme="a">Ingresar</button>
    </form>
</div>


</div><!-- /page -->

</body>
</html>

loggin.css 包含覆盖 css 代码，就是代码：

@media all and (max-width: 1280px)
{
.ui-input-text ui-body-c ui-corner-all ui-shadow-inset
    {
       width:300px;
    }
}

如何覆盖输入文本的宽度？

【问题讨论】：

标签： jquery css jquery-mobile responsive-design

【解决方案1】：

您可以使用 !important 标志覆盖一次 CSS 属性：

.ui-input-text
{
    width: 200px !important;
}

【讨论】：