【问题标题】:issues in html css design textbox disabled?html css 设计文本框中的问题已禁用?
【发布时间】:2012-05-12 10:39:35
【问题描述】:

嘿,我在 android phoneGap 中开发了一个应用程序。我使用 html css 来设计目的,它工作正常。但是当我在文本框中输入时,我的设计正在崩溃。我附上了我的表单。请仔细检查并清除我的问题。

但是当我在这些文本框中输入文本时,我的表单是这样的

在这些我的另一个文本框被禁用。我该如何解决这个问题?

我的代码 更新 电话间隙

     <script type="text/javascript">


    </script>
     <style type="text/css">
     #footer {
    position:absolute; z-index:2;
    top:92%;bottom:32px; left:0;
    width:100%;
    height:18px;
    padding:0;
}
input:focus{//update
outline: none;
 }

.ex21{

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-color:#FBB917;

    border: 1px solid;
  background:url('searchbtn.PNG' ) repeat-y right;
  padding-right:20px;

    }
.ex2{

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-color:#FBB917;

    border: 1px solid;


    }
    .searchbox input {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;

margin-top:0.2cm;

margin-left:1cm;
width:70%;
height: 32px;
float: left;
font-size:15pt;
padding: 2px;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-left: 4px solid orange;

}
.sea input {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-top:0.2cm;

background-image: url(sea.PNG);
color: #fff;
font-weight: bold; 

width:10%; 
height: 43px;
border: 0;
float: left;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-right: 4px solid orange;
}
    .invitebox input {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;

margin-top:0.2cm;

margin-left:1cm;
width:70%;
height: 32px;
float: left;
font-size:15pt;
padding: 2px;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-left: 4px solid orange;

}
.invitebtn input {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-top:0.2cm;

background-image: url(sea.PNG);
color: #fff;
font-weight: bold; 

width:10%; 
height: 43px;
border: 0;
float: left;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-right: 4px solid orange;
}


    </style>
  </head>

  <body >

    <table width="100%">
        <tr>
             <td> <label style="font-size:12pt">Search Names</label></td>

        </tr>
    </table>

  <br>  
    <table>
        <tr>
            <td></td>
            <td></td>


            <td><label style="font-size:12pt">Choose one of the following options to search our directory of Names</label></td>
            <td></td>

            <td></td>

        </tr>
    </table>

    <div align="center">
    <div class="searchbox"><input type="text" name="searchbox" id="searchbox"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
      <br/>
      <br/>
        <br/>

      <br/>
        <br/>
      <br/>
     <table>
   <tr>
   <td></td>
   <td></td>

   <td></td>

   <td></td>
   <td></td>
   <td><input value='' type='radio' id='one'/><label>Limit Search Results to Name</label></td>

   </tr>
   </table>
   <br>
   <br>
   <div align="center">

            <label style="font:bold;font-size:15pt">OR</label>
        </div>
      <br>
      <div id="loadingScreen" align="center"></div>
    <div align="center">
    <div class="invitebox"><input type="text" name="invitebox" id="invitebox" ></div>
<div class="invitebtn"><input name="invite" type="button" ></div>
</div>

     <div id="footer">
        <div style="border-width:3px;border-height:6px;background-color:#00458D;" align="center">
         <table>


         <input type="button" value="Button1" style="width:20%" />
         <input type="button" value="Button2" style="width:20%" />

         <input type="button" value="Button3" style="width:20%"/>
         <input type="button" value="Button4" style="width:20%" />
         </table>
         </div>
        </div>
  </body>
</html>

【问题讨论】:

    标签: android html css cordova


    【解决方案1】:

    我为你创建了一个jsfiddle example。我还添加了@Darthur 给出的轮廓边框代码。您的 HTML 或 CSS 没有问题。请检查那个jsfiddle。问题可能出在您的 javascript 文件上。

    【讨论】:

    • 它在 android-15 版本中工作,它在 android-8(2.2) 中不工作
    • 我不会在这个应用程序中添加任何脚本,只是设计而已
    • 但是您可以在那个 jsfiddle 示例中看到,键入时没有一个文本框被禁用。
    • 你在用android 2.2版本吗?
    【解决方案2】:

    这是在焦点上显示的轮廓边框。

    您可以通过将其添加到您的 CSS 中来为所有 input 元素禁用它:

    input:focus{
        outline: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }
    

    请注意,如果窗口的背景不是白色,则需要更改颜色。

    【讨论】:

    • @Dathur 看起来像这样我已经更新了我的代码请通过它
    • 可能是使用了webkit的功能。我已经更新了上面答案中的代码,并包含了 webkit 函数。
    • @Darthur 他的问题不是轮廓边框。当他在第一个文本框上键入时,第二个没有看到。
    • @libin 那是问题,在第二个文本框中输入文本时也是如此。
    猜你喜欢
    • 1970-01-01
    • 2011-07-27
    • 1970-01-01
    • 2016-03-28
    • 2017-03-19
    • 2011-03-11
    • 1970-01-01
    • 2022-01-16
    • 2014-12-04
    相关资源
    最近更新 更多