CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 1

Does anyone know why my input text is not showing up? (HTML/CSS input type text)

I'm making a form for a bookstore, but my input-type text isn't showing up on the page. Does anyone know the reason? Is it something to do with the span or div properties?

<html>
<head>

<style>
body {background-color : #ededed; font-family : "Open Sans", sans-serif;}

h1 {padding: 40px; text-align: center; font-size: 1.5em;}

li a {text-decoration : none; color : #2d2f31;}


.top-div {
  width : 300px; 
  background: #d9d9d9;
  margin : 40px auto; 
  text-align: center;
}

span {
  padding : 30px;
  background : #2d2f31; 
  color : white;
  font-size : 1.2em;
  font-variant : small-caps;
  cursor : default;
  display: block;
}

span::after {
  float: right;
  right: 10%;
}

.slide {
  clear:both;
  width:100%;
  height:0px;
  overflow: hidden;
  text-align: center;
  transition: height .4s ease;
}

.slide li {padding : 30px;}

#book {position: absolute; opacity: 0; height: 0px;}    


h1 {
    margin: 40px auto;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: #2d2f31;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

input[type=text] {
    border: 2px solid black;
    border-radius: 4px;
    width: 300px;
    display: block;
    margin: 40px;
    cursor: auto;
}

</style>

</head>

<body>


    <h1>Bookstore</h1>

    <div class="top-div">

    <form method="post">
    <label for="book"><span> Enter the title of the book that you wish to order.</span> </label> 
    <input type="text" name="customer_order" id="book"> </input>
    <br> <br> 
    <input type="submit" value="Submit"> 
    </form>

</div>

</body>

</html>

Upvotes: 0

Views: 58

Answers (1)

Alex DeStefano
Alex DeStefano

Reputation: 237

It is because you had opacity: 0; set in your css code for #book. This means that you're input element is completely transparent. See here. Also, you're hight is set at 0px, so it comes out very small on the page.

Upvotes: 1

Related Questions