SelectBox太小，無法調整它

我正在編寫PhoneGap應用程序，並使用Twitter的Bootstrap進行響應式設計。SelectBox太小，無法調整它

說校園/帳戶/部門的框是選擇框。我認爲這是很明顯的問題是選擇框怎麼較小，不可改變的，當我嘗試的東西在CSS一樣：

3210

：問題是我的選擇框什麼

select{ height: 30px; /** OR */ lineheight: 30px; }

截圖

這裏是我的html文件：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="format-detection" content="telephone=no" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" /> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" /> 
<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css" /> 
<link rel="stylesheet" type="text/css" href="css/template.css" /> 
<link rel="stylesheet" type="text/css" href="css/precode.css" /> 
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" /> 
<title>P-Card Mobile</title> 
</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <ul class="nav pull-left"> 
        <li id="titleLogo"><i id="back" class="icon-white icon-angle-left"></i><img src="img/lcbug.png"></img></li> 
        <li id="titleText"><h4>Blackbriar</h4></li> 
       </ul> 
       <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> 
       <div class="nav-collapse collapse"> 
        <ul class="nav"> 
         <li class="dropDown"><a href="main.html">Home <i class="icon-white icon-home"></i></a></li> 
         <li class="dropDown"><a href="transactions.html">Transactions <i class="icon-white icon-credit-card"></i></a></li> 
         <li class="dropDown"><a href="settings.html">Settings <i class="icon-white icon-cog"></i></a></li> 
         <li class="dropDown"><a id="logoutBtn" href="index.html">Logout <i class="icon-white icon-off"></i></a></li>       
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div id="templates"> 
       <ul id="templateUl" class="nav nav-pills"> 
        <li class="templi"> 
         <a class="pill"> 
          <text class="temp">Walmart</text> 
         </a> 
        </li> 
       </ul> 
      </div> 
      <div id="templateEdit" class="span9"> 
       <form id="codingForm" method="post"> 
        <input id="templateName" type="text" class="tallerInput" placeholder="Template Name" required> 
        <input id="descriptionField" type="text" class="tallerInput" placeholder="Description" required> 
        <select id="campusField" required> 
         <option value="">Campus</option> 
        </select> 
        <select id="accountField" required> 
         <option value="">Account</option> 
        </select> 
        <select id="departmentField" required> 
         <option>Deptartment</option> 
        </select> 
        <input id="programNameField" type="text" class="tallerInput" placeholder="Program Name"> 
        <input id="projectIdField" type="text" class="tallerInput" placeholder="Project ID"> 
        <input id="taskIdField" type="text" class="tallerInput" placeholder="Task ID"> 
        <br> 
        <button id="saveBtn" class="btn btn-large btn-primary">Save</button> 
       </form> 
      </div> 
     </div> 
    </div> 

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/commonFunctions.js"></script> 
    <script type="text/javascript" src="js/template.js"></script> 
    <script type="text/javascript" src="js/precodeFunctions.js"></script> 
    <script type="text/javascript" src="js/precode.js"></script> 
</body> 
</html>

來源

2013-07-08 RyanDawkins

得到了同樣的問題：http://stackoverflow.com/questions/14738203/phongap-build-webkit-appearance -no-下拉箭頭換選擇標籤 –

更新樣式如下：

select.custom { min-height: 30px; /** OR */ line-height: 30px; }

改變你的選擇標記HTML如下：

<select id="accountField" class="custom" required> 
    <option value="">Account</option> 
</select>

......你見過這個鏈接

來源

2013-08-22 11:47:41

SelectBox太小，無法調整它

回答

相關問題