I have a html.php file that, without any css, displays as expected. But as soon as I add the following CSS, none of the values in the fields input(text, checks, etc.) are visible. But I can select a text field, for example, and copy and paste its contents in order, so I know that the fields contain values.
I worked hard on changing the background color and the font in case there is any problem, but nothing similar has changed this behavior. Something else fancy seems to be related to this problem, when I click on the text field input, the cursor (blinking) is displayed and has the right size, but when I start to enter text and the cursor moves around the text field, it changes to very Small cursor size. Weird Again, not a single CSS and html.php page works.
Can someone take a look at CSS and let me know if there is some glaring problem that might explain the strangeness I am experiencing?
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 {
box-sizing: border-box;
width: 300px;
}
.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;
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;
}
EDIT enable 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>
<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">
<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>
</body>
</html>
source
share