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>
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.
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.
Also worth noting, on macOS and iOS, in any browser, the "user agent stylesheet" will override textbox style. You can override this (including the ::focus glow) by adding !important.
#mybox {
background-color: transparent!important;
border-color: transparent!important;
outline: transparent!important;
}
<input type="text" id="mybox" value="Textbox" />
saying I want a transparent color is like having the parent's color so put the value of background-color as inherit.
for me this helped:
<input type="text" />
style:
input {
background-color:inherit;
}
<style type="text/css">
input {
background-color : white;
border-color: transparent;
}
</style>
<input type="text" />
Related
How to cancel the blur effect of the HTML textbox when focus on it?
<input type='text' style="background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; "></input>
You have to use CSS on the input element on focus to eliminate that "blur" effect that you're talking about. Take a look at this JSFiddle for an example.
http://jsfiddle.net/qfr8eng1/1/
HTML:
<input type="text" id="noeffect" value="look at me!"/>
CSS:
#noeffect
{
background-color: #33ccff;
color: #AD8C08;
border: 1px solid #ffffff;
}
#noeffect:focus
{
outline: none;
}
try it......
.onfocus { background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; }
.onfocus:focus { background:none; }
<input type='text' class="onfocus"></input>
Please bare in mind that I am new to code!
So I have a header and some text, that I am wanting to place on top of a background image that i have input using CSS, therefore the positioning is key.
It was all working fine, until i added more HTML content under neither the text. From this it was just as if the text wasn't picking up my CSS instructions.
HTML:
<div id="sidemicro">
<text class="circleheader"><h3>Special Occasion?</h3><p>Give us a call and </br> we'll see how we can make </br> your tour extra special!</p></br>
This is the text i need to format:
<div id="form">
<form action ='otterabout.php' method='POST'>
*Your Name: <input type='text' name='name'><br />
*Your Email: <input type'text' name='email'><br />
*Date of visit: <input type'date' name='date'><br />
*Time of visit: <input type'time' name='time'><br />
*Group Size: <input type'text' name='groupsize'><br />
<input type='submit' name='submit' value='Login'>
<input name='reset' type='reset' value='Reset'>
</form>
</div>
</div>
This is the content under the text which has stopped it formatting.
CSS:
.circleheader {
margin-top:70%;
margin-left:15%;
}
.circletext {
text-align:center;
margin-left:35%;
}
Thanks!
Is this the type of formatting you're looking for? FIDDLE.
CSS
.sidemicro {
margin-left: 10px;
width: 600px;
border: 1px solid black;
background: url('https://res.cloudinary.com/roadtrippers/image/upload/v1396514626/p2nmpjpgjsm8iihdh5ip.jpg');
background-size: 600px;
background-repeat: no-repeat;
}
.circleheader {
width: 200px;
border: 0px solid black;
margin: 10px auto;
color: white;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
}
I'm attempting to use CSS in order to make a sumbit button containing an image. Here's the code:
HTML
<input type="submit" id="search" name="submit" alt="search" >
CSS
input#search{
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
}
This returns this submit button, but I don't want the word 'submit' or the gray square box to appear.
If anyone could suggest what the problem might be, it would be greatly appreciated.
The gray box is caused by a default border being added to the submit buttons. Whereas the submit text is the default value for the button.
HTML:
<input type="submit" id="search" name="submit" alt="search" value="">
CSS:
input#search {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}
Add value with empty string to the input:
<input type="submit" id="search" name="submit" alt="search" value="">
instead of input type="submit" you can use input type="image"
use this one line code
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
see DEMO
You can use CSS text-indent to move the text away:
input#search {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
text-indent:-999px
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
Set blank Value of the input type submit as shown below :
<input type="submit" id="search" name="submit" alt="search" value="" >
try this
input#search {
background:url(../search-icon.png) no-repeat;
width:40px;
height:40px;
text-indent:50px;
overflow:hidden;
}
<!DOCTYPE html>
<html>
<head>
<style>
input.search{
background-image:url(url.jpg);
text-indent:-9999px;
width: 100px;
height: 30px;
border:2px solid rgb(0,102,153);
}
</style>
</head>
<body>
<input type="submit" class="search" alt="search">
</body>
</html>
I find this to be the most complete solution:
#submitbutton {
background-image: url(http://paulabrown.net/search-button-png-210.png);
background-repeat: no-repeat;
height: 24px; // height of image
width: 24px; // width of image
padding: 0;
border: none; // get rid of grey border
color: transparent; // hide the text (without indenting it to hell)
background-color: transparent;
outline: none;
display: block; // Ensure block element to apply this to inline-elements
}
html: <input type ="submit" value ="" class="search-button"/>
CSS:
.search-button
{
background-image: url("/images/search.png");
background-repeat: no-repeat;
min-width: 52px;
min-height: 20px;
width:52px;
height: 20px;
border:0;
}
Can anyone explain why on the 3rd line of the CSS in this JFiddle demo why the div ID of #form_container requires a height in order for the background to show if a float:left is specified at line 14?
I thought floats did not remove objects from the flow of the browser...
<div id="form_container">
<form id="contact_form" action="#" method="get" accept-charset="utf-8">
<p>
<label for="byour_name">Name:</label>
<input type="text" name="byour_name" value="" id="byour_name">
</p>
<p>
<label for="byour_email_address">Email:</label>
<input type="text" name="byour_email_address" value="" id="byour_email_address">
</p>
<p>
<label for="subject">Subject:</label>
<input type="text" name="formsubject" value="" id="form_subject">
</p>
<p>Message:
<br/>
<textarea id="form_messagebox" name="Message" rows="20" cols="25"></textarea>
</p>
<p>
<input id="submitBtn" type="submit" value="Send it!">
</p>
</form>
CSS
#form_container {
width: 300px;
/* height: 300px; Background works with this uncommented if the float is enabled*/
border: 2px red solid;
padding: 0 10px 0 10px;
background-color: red !important;
}
#form_container form {
color: black;
}
#form_container input, p {
margin: 0;
padding 0;
float:left; /* This breaks the background */
display:inline;
}
#form_container label {
width: 200px;
position:relative;
}
#submitBtn {
}
#contact input, textarea {
box-sizing: border-box;
color: rgb(0, 0, 0);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
background-color: rgb(221, 220, 219);
font: normal normal normal 16px/1.3em'open sans', sans-serif;
border: 0px solid rgb(192, 185, 181);
}
#form_messagebox {
height: 150px;
width: 200px;
}
here is fiddle of your que see this
http://jsfiddle.net/jkkheni/eJS6b/3/
added a css class of clear
.clear{ clear:both; height:0px; width:0px; display:table; content:"";}
and added a div in your html
<div class="clear"></div>
before closing div with id form_container
when you use float always clear all float.
or you can also use overflow:hidden in div with form_container id
float removes height of the element if it is not specified.
Try:
#form_container{
overflow:hidden;
}
DEMO here.
OR
clear floats after finishing form:
<div class="clr"></div>
.clr{clear:both;}
DEMO here.
I have a text field and I dont want to show border around it as it is a read-only text field. How can I make it to appear without the border and without the background color?
since you did not give any information about the css version, here's an example:
<style type="text/css">
input[type=text]
{
border: 0px;
background: transparent;
}
</style>
<input type="text" value="helllo" />
working demo
#your_text_field {
border-style: none;
background-color: transparent;
}
Edit: Oh well, what do you know, transparent actually works on IE6. I remember it not working for certain attributes, such as border.
#input { border:0; background:transparent; }
<html>
<head>
<style type="text/css">
input.asLabel
{
border: none;
background: transparent;
}
</style>
</head>
<body>
<form>
<input class="asLabel" type="text" value="See, don't touch :)" disabled/>
</form>
</body>
</html>
Tried something along the lines of:
<input class="noBorderAndBackground" type="text" />
noBorderAndBackground{
background-color:white;
border-style:none;
}