在链接css页面时,无法以html.php格式查看用户输入

2019年7月28日 119次阅读

我有一个html.php文件,没有任何预期的CSS渲染.但是,只要我添加以下CSS,就可以看到输入字段(文本,检查等)中没有任何值.但我可以突出显示一个文本字段,并将其内容复制并粘贴,所以我知道这些字段包含值.

我一直在改变背景和字体颜色以防万一有问题,但似乎没有改变这种行为.可能似乎与此问题有关的其他古怪的是,当我点击文本字段输入时(闪烁)光标是可见且尺寸正确,但是当我开始键入并且光标在文本框中移动时,它会发生变化到一个非常小的游标大小.奇怪的.同样,没有CSS和html.php表单页面按预期工作.

有人可以看看CSS,让我知道是否有一些明显的问题可以解释我遇到的奇怪之处？

a {
  text-decoration: none;
}
fieldset {
  max-width: 900px;
}

.formContent {
  box-sizing: border-box;
  max-width: 500px;
  margin: 0 auto;
  padding: 55px;

  background-color:  #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);

  font: bold 14px sans-serif;
  text-align: left;
}

.formContent .formRowDiv {
  text-align: left;
  max-width: 315px;
  margin: 25px auto 0;
}

.formContent .formRowDiv label span {
  /*display: block;*/
  box-sizing: border-box;
  width: 300px;
  /*box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);*/
  /*padding: 12px 18px;*/
  /*border: 1px solid #dbdbdb;*/
}

.formContent input {
  box-sizing: border-box;
  width: 200px;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
  padding: 12px 18px;
  border: 1px solid #dbdbdb;
  color:  #5f5f5f;
}

.formContent input[type=checkbox],
.formContent input[type=radio] {
  box-shadow: none;
  width: auto;
}

.formContent input[type=text]{
  height: 10px;
  /*margin-bottom: 50px;*/
  font-size: 14px;
  color: orange;
}

.formContent .radioButtons > div {
  margin-bottom: 10px;
}

.formContent .radioButtons label span {
  margin-left: 5px;
  color:  #5f5f5f;
  font-weight: normal;
}

.formContent .textInputShort {
  width: 75px;
}

html {
  background-color: orange;
}

编辑包含HTML

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title>Site Details</title>
  <link rel="stylesheet" type="text/css" href="style2.css" media="all">
  <script type="text/javascript" src="view.js"></script>

</head>
<body>
<?php
...
?>
  <h1 id="heading">Site Details</h1>

  <div id="clearPageDiv">
    <p><a href="index2.php">
      <input id="clearPage" class="button" type="button" name="clearPage" value="Clear Page">
      <input type="submit" value="Retreive Site Details">
    </a></p>
  </div><!-- closes clearPageDiv -->

  <!--fieldset id="Site:"-->
    <!--legend>Site:</legend-->
    <div id="formContentDiv">
      <form class="formContent" action="#" method="post" accept-charset="utf-8">
        <input type="hidden" name="submitted" value="true">

        <div class="formRowDiv">
          <label>
            <span>Site Id:</span>
            <input id="siteId" name="siteId" class="textInputShort" type="text" maxlength="" $value=""> 
            <script>
              siteId.value = <?php echo json_encode( $siteId ); ?>;
            </script>
          </label>
        </div>

        <div class="formRowDiv">
          <label>
            <span>Site Name:</span>
            <input id="siteName" name="siteName" class="textInput" type="text" maxlength="" $value="test"> 
            <!--input type="submit" value="Retreive"-->
            <script>
              siteName.value = <?php echo json_encode( $siteName ); ?>;
            </script>
          </label>
        </div>

        <div class="formRowDiv">
          <label>
            <span># HSPA BBUs:</span>
            <input id="numHspaBbu" name="numHspaBbu" class="textInputShort" type="text" maxlength="" $value=""> 
            <script>
              numHspaBbu.value = <?php echo json_encode( $numHspaBbu ); ?>;
            </script>
          </label>
        </div>

      </form>
    </div><!-- close mainWrap -->
  <!-- /fieldset -->

</body>
</html>

最佳答案 删除“高度”：

    .formContent input[type=text]{
  height: 10px;
  /*margin-bottom: 50px;*/
  font-size: 14px;
  color: orange;
}

所以它成了：

.formContent input[type=text]{

  /*margin-bottom: 50px;*/
  font-size: 14px;
  color: orange;
}
点赞