I have a simple HTML page with background image, and now I'm applying a contact form on this HTML page.
I want to show the background image in the text input field i.e, I want to make input text field transparent. I have use CSS code background-color:transparent;, but it doesn't work. I am getting a white background for input text field.
try this
.contact
{
background: url(https://www.gravatar.com/avatar/ba03773d5fe4b970a7d7fb57a112e932?s=32&d=identicon&r=PG) no-repeat right center;
height:100px;
width:200px;
padding:10px;
}
.contact input[type="text"]
{
background:rgba(0,0,0,0);
border:1px solid #fff;
color:#fff;
}
http://jsfiddle.net/2ZmFA/
This is working on Fiddle:
input[type="text"]
{
background: transparent;
}
and withour border if you want by border: none;
Here is the Fiddle
So your problem must be at another place in code. Add more code and i will update my answer ;)
<input type="text" class="textInput"/>
CSS :
.textInput {
background: transparent;
background-image: url(Images/textBg.jpg)
}
You could set the background color to transparent.
background-color: rbga(0,0,0,0);
alternatively in css3 you may set the opacity of the whole element:
opacity: 0;
Related
I have the following code:
CSS:
<style>
div.testy {
border:1px solid black;
}
div.testy:hover {
background-color:red;
}
</style>
HTML:
<div class="testy" style="height:100px;
background: url('down.png') no-repeat; background-size:contain;">
aa
</div>
'down.png' is an image with a transparent background. What I wanted to do was have the color of the background change while still keeping the image in front of the color.
The previous code does almost everything right, except that when I hover the mouse over the div, nothing happens.
QUESTION: Why might it be that the hovering and the background color change are not working?
Here is a jsfiddle link with the problem happening:
https://jsfiddle.net/sdsze2fv/
The problem is that you are using background: for the "background image". Differentiate background image and background color by using background-color and background-image respectively.
div.testy {
border:1px solid black;
}
div.testy:hover {
background-color:red;
}
<div class="testy" style="height:100px;
background-image: url('http://www.w3schools.com/html/html5.gif');
background-size:contain;">
aa
</div>
This happens because you already defined your background inline in your html.
Inline styles always override styles set in a css file unless you have added !important to the style.
I recommend that you only set background-image in your inline style and then background-color in your rule in the CSS-file.
div.testy {
border:1px solid black;
}
div.testy:hover {
background-color:red;
}
<div class="testy" style="height:100px;
background-image: url('down.png'); background-repeat: no-repeat; background-size:contain;">
aa
</div>
The background you are setting inline is overriding the one in the css rule. Inline styles always override anything (except stuff with !important). If you remove the inline and put it in a rule, it will work. Or another method is included in this
JSFIDDLE
in this we are saying 'hey, i want the bkgrnd image to be this'...not the background...because background includes everything from image, color, repeat etc. Its the shorthand. So you are technically setting the bkgrnd color there too...which is why its over riding your hover.
Here is the other option...remove from inline and put it into the rule...as is....then it also works
JSFIDDLE2
div.testy {
border:1px solid black;
height: 100px;
font-size: 25px;
color: orange;
background: url('https://upload.wikimedia.org/wikipedia/commons/3/3a/Gluecksklee_(transparent_background)2.png') no-repeat;
background-size: contain;
}
div.testy:hover {
background-color:red;
}
I've looked around a bit but can only find JS solutions to this.
Is there a way with CSS to detect if an input has any text entered?
What I'm doing is basically this (cut out the irrelevant code for this question):
.search-form input[type="text"] {
width: 0 !important;
}
.search-form input[type="text"]:focus {
width: 100% !important;
}
Essentially, clicking on the label expands the input to 100% of the page width. This works fine, but when you enter text and click off the input, it shrinks back to width:0 - therefore hiding the inputted text. Is there a way with CSS to prevent this behaviour and keep it at width:100% like when the input is :focus when there's text inputted?
Try adding the "required" property to the text field in the HTML, and then add this to the CSS:
.search-form input[type="text"]:valid {
width: 100% !important;
}
I would probably try to avoid all those !importants though.
Not sure if it will work for your specific use case, but you could achieve the effect with a fake input, using contenteditable
Working Example
.fakeInput {
border: 1px solid red;
display:inline;
padding:2px; /* optional */
}
.fakeInput:focus {
display:block;
border: 2px solid blue;
width:100%;
height:1em;
}
<div class="search-form">
<div class="fakeInput" contenteditable="true"></div>
</div>
How would I make a submit button appear as just plain text which will override the default browser button style?
I have searched the internet but all I find is how to put a image for a submit button.
You will need background-color: transparent; (Or you can use hex as well) and border: 0;, that will get you the desired result.
input[type="submit"].plain {
border: 0;
background: transparent; /* Or whatever background color you want to use */
}
Demo
input[type=submit] {
border:none;
background-color:white;
}
And an example you can find here:
http://jsfiddle.net/f7x35/
You could style it something like this, and then make the needed tweaks to it to make it fit the rest of your design.
input[type=submit]{
border: 0px;
background: inherit;
padding: 0;
}
The background: inherit; is to make sure it follows your original background color.
I am pretty new to CSS borders, and i have run into some issues i don't seem to be able to fix. As im new to this, and there is propably many other wondering the same thing (of css newbies). I have this border that should work fine, according to my thinking (might be full of wrong-ish logic). The code i use for the hover and default state is:
.profile-box .opener {
float:left;
background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
background-position: center center;
background-color: #fff;
width:32px;
height:38px;
overflow:hidden;
text-indent:-9999px;
border-left:1px solid #dde2e8;
}
.profile-box .opener:hover {
float:left;
background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
background-position: center center;
background-color: #F0F0F0;
width:32px;
height:38px;
overflow:hidden;
text-indent:-9999px;
border-left:1px solid #dde2e8;
}
The issue do not appear to me in any way, and im as said twice, new to css. Please help me with this. It will mean a lot to me. Thanks.
FIDDLE: http://jsfiddle.net/dCe3u/
If you want to apply border to all the four sides you should change
border-left:1px solid #dde2e8;
to
border:1px solid #dde2e8;
FIDDLE HERE
border-left will apply border only to the left side, You can refer more on border here CSS BORDER >>
I just checked your code. I literally copy and paste your code and the border does appear, I think the problem is the color of the border is too light (if you use white background). See the demo http://codepen.io/ImBobby/pen/yicCz. In that demo I intentionally change the border color to red.
I also notice that you declared same style on hover state of .opener element except for the background-color. You might want to change your code into this:
.opener {
float: left;
background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
background-position: center center;
background-color: #fff;
...
}
.opener:hover {
background-color: #F0F0F0;
}
short explanation, .opener:hover will inherit styles from opener.
I'm maintaining the Perl Beginners' Site and used a modified template from Open Source Web Designs. Now, the problem is that I still have an undesired artifact: a gray line on the left side of the main frame, to the left of the navigation menu. Here's an image highlighting the undesired effect.
How can I fix the CSS to remedy this problem?
It's the background-image on the body showing through. Quick fix (edit style.css or add elsewhere):
#page-container
{
background-color: white;
}
That is an image. (see it here: http://perl-begin.org/images/background.gif) It's set in the BODY class of your stylesheet.
The grey line is supposed to be there. The reason why it looks odd is because the very top is hidden by the buffer element. Remove the background-color rule from this ruleset:
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
I think it's this:
#page-container {
border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150);
}
However, I'm not seeing why the right border isn't showing up....
I found the problem.
The problem is that you need to set a white background on #page-container. As things stand, it has a transparent background, so the 5pt left margin on navbar-sidebanner is revealing the bg of the page_container ... so change that bg and you're cool.
I would do a quick fix on this to add the style:
border-left:2px solid #BDBDBD;
to the .buffer class
.buffer {style.css (line 328)
background-color:#FFFFFF;
border-left:2px solid #BDBDBD; /* Grey border */
float:left;
height:20px;
margin:0px;
padding:0px;
width:160px;
}
Thanks to all the people who answered. The problem was indeed the transparency of the #page-container and the background image of the body. I fixed them both in the stylesheet.