Make Text Input Box Transparent? Should be simple?

2019-06-21 20:32发布

站内问答 / HTML/CSS
1517 3 6

I'm trying to make my form input transparent and over lay it on top of my div. Basically I want the text field to be transparent to whatever is behind it. Any suggestions?

<head>

<style type="text/css">
  .WRAPPER {
    background-color: #000;
    height: 575px;
    width: 975px;
    background-image: url(exit-gate/exit-gate-bg.png);
    top: auto;
    margin: -8px;
  }

  body {
    background-color: #000;
  } 
</style>

<style type="text/css">
  term {
    background: transparent;
    border: none;
  }
</style>

</head>



<body>
  <div id="WRAPPER"> 
    <div class="term"><input name="email" type="text" id="email">
      <form name="form1" method="post" action="insert_ac.php">
        <input type="image" src="exit-gate/white-box-10.png" alt="{alternate text}" name="submit" value="submit">
      </form>
    </div>
  </div>
</body>
</html>
</div>

标签： html css forms
举报
3条回答
我只想做你的唯一
2楼-- · 2019-06-21 21:00

Try:

#email {
    background-color:rgba(0, 0, 0, 0);
    color:white;
    border: none;
    outline:none;
    height:30px;
    transition:height 1s;
    -webkit-transition:height 1s;
}
#email:focus {
    height:50px;
    font-size:16px;
}

DEMO here.

查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
3楼-- · 2019-06-21 21:05

this looks ways too simple but it worked for me:

 <input type="text" id="SI"/>

this is my input field, I gave it an ID(SI), then in my CSS:

#SI{
    background-color:transparent;
}

added the transparency to the element with SI id; the background became visible.

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
4楼-- · 2019-06-21 21:08 

<style type="text/css">
	input {
		background-color : white;
		border-color: transparent;

	}
</style>
<input type="text" />

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)