I have a div set transparent with rgba and want on that div an input field which also has a transparent background. The problem is that the input field background is not rendered transparent.
It works if I use opacity:0.8; on the div but than also the text is transparent, so I need rgba.
For the second input field which is outside of the transparent div rgba works.
Here my example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
.term {
background-color: rgba(0,0,0,0.8);
color: #5fba3d;
width: 200px;
height: 100px;
}
input {
background-color: rgba(0,0,0,0.8);
color: #FFF;
border: none;
}
</style>
</head>
<body>
<div style="background-color:yellow; width:300px;">
<div class="term">
Input 1 <input type="text" value="Test" />
</div>
<br />
<input type="text" value="Input 2" />
</div>
</body>
</html>
Any ideas?
Thanks!
Nathanael
Hey Nathaneal its working fine if i chang the rgba value so text is not going to transparent
input {
background-color: rgba(0,0,0,0.1);
color: red;
border: none;
}
i hope this will help you...
you can see the demo :-
http://jsbin.com/avupaw/16/edit#html,live
Or just
input {
background: none;
color: red;
border: none;
}
Related
I'm a CSS newbie and I have trouble figuring how to solve this issue. If an input is invalid, I need to mark the input with a red border only on the left side.
My CSS looks like this:
input.ng-invalid {
border-left-width: 10px;
border-left-color: red;
}
It works fine except that it does add 10px to the width of the input and an invalid input is larger from a valid one.
Example of my issue
Is there a way to keep the width for both a valid and invalid input exactly the same? I believe, I am not using the proper property to achieve what I want.
As per initial suggestion, you can use CSS box-sizing property by setting it up to value of border-box, which means that all elements sizing's calculation will include values of borders, paddings and heights and widths. But you'll also need to fix the width (or height) of element, as in the example below:
input {
width: 200px;
box-sizing: border-box;
}
.invalid {
border-left-width: 10px;
border-left-color: red;
}
<input type=text />
<br />
<br />
<input type=text class=invalid />
PS. border-color: transparent sounds a bit like a hack
What may be happening is that your normal elements do not have a border around it by default. If that's the case, you're actually introducing a border around your elements.
What you may need to do is the following.
<html>
<body>
<input value='Valid' /><br />
<input class='ng-invalid' value='InValid' />
</body>
</html>
<style>
input{ border-left-width: 10px; border-left-color: transparent; } /*now all borders has a left transparent border of 10*/
input.ng-invalid { border-left-width: 10px; border-left-color: red; }
</style>
i made a snippet for you please check below link:
https://jsfiddle.net/fatehjagdeo/sx9g3yLs/
or check this below code:
<html>
<head>
<title>demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<style>
.ng-invalid {
border-left-width: 10px;
border-left-color: red;
}
</style>
<script>
$(document).on('click','#submit',function(){
$('input').removeClass('ng-invalid');
var value=$('#name').val();
if(value==""){
$('#name').addClass('ng-invalid');
}
});
</script>
</head>
<body>
<input id="name" /><br />
<input type="button" value="submit" id="submit">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: red;
}
</style>
</head>
<body>
<textarea readonly cols=200 rows=40>
<span>
hahahahaha
</span>
</textarea>
</body>
</html>
in this example，is there anyway I can make the text in <span> to be red in color
or can it be done by some other html tag like <textarea>?
No, you can't put an HTML element inside of a form field tag like textarea or input. You can, however, make the color in a textarea red using normal CSS.
textarea {
color: red;
}
<textarea>text</textarea>
An alternative method you can also use is to adjust the styles of the placeholder attribute.
link to jsfiddle
Hope this helps.
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
Who are you?<br />
<textarea readonly rows="4" cols="50" placeholder="Describe yourself here..."></textarea><br />
<input type="text" placeholder="red" />
OK, now I konw I can't insert into
and i have got another way
<style type="text/css">
.testDiv{
bottom: 36px;
height: calc(100vh - 280px);
resize: none;
overFlow-x:scroll;
overFlow-y:scroll;
}
.keyword{
color:red;
}
</style>
<div class='testDiv' id="keyword">
one<br>
two<br>
three<br>
<span class="keyword">four</span><br>
</div>
just add scroll,height css in div
I've started out trying to build a HTML 5 website but have ran into a problem with CSS. Below is a MCVE of the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 75%;
}
div.topbar {
background-color: #777777;
border-bottom: 1px #000000 solid;
color: #FFFFFF;
padding: 5px;
}
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>
If you take out the <!DOCTYPE html> tag, the top bar across the top of the page works but if you put it in, it doesn't render correctly as the background colour of the div element is not rendered and neither is the border.
What am I doing wrong here so that the div.topBar style definition isn't being fully respected?
The problem is that
div.topbar
Should be
div.topBar
Because <div class="topBar"> is not <div class="topbar">
It is still being rendered in quirks mode for some reason but html5 mode wont render it.
(Demo)
HTML and CSS are case sensitive.
'topbar' and 'topBar' are different. Either capitalize the name of the class or correct the div.topbar.
Kind of new to css but I have one image I want on top left corner and then another image I want to repeat after that. Currently I tired:
CSS
#topsection{
background: url('../images/bannerBGs.jpg');
background-repeat:no-repeat;
background: url('../images/bannerBGl.jpg');
background-repeat:repeat-x;
height: 200px; /*Height of top section*/
color: White;
text-align:center
}
#topsection a{
color: #FFFF80;
}
#topsection h1{
margin: 0;
padding-top: 25px;
text-align:Left
}
#topsection h2{
margin: 0;
padding-top: 0px;
text-align:Center
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IG Indy Gamers</title>
<link rel="stylesheet" type="text/css" href="CSS/mycss.css" media="screen" />
</head>
<body>
<div id="maincontainer">
<div id="topsection" > <div class="innertube">
<h1>IG -Indy Gamers </h1>
<FONT style="BACKGROUND-COLOR: blue"><p align='right'>  Signup </font> / <a href='Login.html' id='LoginContent' >Login </a></p>
<ul id="list-nav">
<li>Home</li>
<li>Reviews</li>
<li>News</li>
<li>Forums</li>
<li>Demo's</li>
<li>Members</li>
<li>Contact</li>
</ul>
</div></div>
but the second image just copies over the first. Can you suggest another way to do this. I heard using layers may do it but I know nothing about that yet.
Looks like CSS3 supports multiple background images; you specify them separated by commas:
background: url('banner1.jpg'), url('banner2.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;
Play with background-position until it does what you want.
IE < 9 does not support this feature.
You'll need to create 2 containing elements: 1 for the repeating image. And a 2nd for the image in the top left.
In other words, something along the lines of:
<div class="repeatingBgImage">
<div class="otherBgImage">
<!-- content -->
</div>
</div>
CSS works in a, well, cascading manner. Anything you declare can and will be overwritten by the next line in the statement, i.e.,
.someClass {
color: yellow;
color: blue;
}
The final color of the text will be blue, not green (yellow+blue=green).
Given your sample...
#topsection{
background: url('../images/bannerBGs.jpg');
background-repeat:no-repeat;
background: url('../images/bannerBGl.jpg');
background-repeat:repeat-x;
}
... the background image will always be bannerBGl.jpg and repeat-x since it is lower in the declaration of the CSS, thus overwriting the previous bg image and repeat declaration.
If you're targeting new browsers, css3 now can apply two background images on one element. You might want to check this one out
http://www.css3.info/preview/multiple-backgrounds/
you css
/*TOPSECTION */
#topsection{
background: url('../images/bannerBGs.jpg');
background-repeat:no-repeat;
background: url('../images/bannerBGl.jpg');
background-repeat:repeat-x;
height: 200px; /*Height of top section*/
color: White;
text-align:center
}
try this
background-image:url('../images/bannerBGs.jpg'),url('../images/bannerBGl.jpg');
background-repeat: no-repeat, repeat-x;
background-position: left top , 20px 30px;
//background-position adjust second value which in px until you meet your requirment
Thanks!
I'm designing a form layout to be uesd on many pages within an online system. A devout user of tables for this purpose for many years, I'm getting pretty used to using CSS + labels for this now.
One thing I've yet to be able to master is the way different browsers pad & position the label relative to the input field. I'll give a code example, plus a close up image of how it renders in each browser (IE = IE9).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>HTML template</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
body {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
letter-spacing:normal;
margin:20px;
}
input {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
border:solid 1px #666;
width:150px;
}
.fld {
}
.usr {
border:solid 1px red;
}
p {
}
</style>
</head>
<body>
<p>
<label class="usr" for="email">Email*</label>
<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
</body>
</html>
OK - now I can post a pic - here is what it looks like after Ahmed Masud's changes. He was right - the reset.css file I had (from http://html5reset.org/) didn't have padding on the input element. However, even after applying the changes, there is still a variation in the alignment of the base of the text in the label compared to that in the input. Now Firefox is dead-level, and for IE & Chrome the label text is 1px higher.
If I remove the link to reset.css, things change again: Chrome becomes dead-level, IE puts the label 1px higher than the input text, Firefox 1px lower than the input text. See below:
I should point out that this is a very basic layout, simply to try and diagnose the problem. I'll be making it look all better later. But first I need to know how to make all my text line up across all browsers with one CSS solution.
Okay css alignments are slightly a black art with CSS2 so let me tell you what's happening:
1) the reset.css you have probably is NOT resetting the padding of the input element which is why you are getting that off by 1/2 pixel error
Try adding these to your style
So one thing is to remove that padding from input:
input { padding: 0 }
You will now have to set the height of both label and input elements:
.fld { height: 16px; }
.usr { height: 16px; }
The other thing is that you probably want to align fields nicely one below the other. One way to achieve that is to make the label a block with float left property:
.usr { display: block; float: left; }
and the .fld a block as well:
.fld { display: block }
you would want to add some other parameters to p to make rendering something more aesthetic.
Here is what i did to your file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Southrock HTML template</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
body {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:13px;
margin:20px;
}
input {
border:solid 1px #666;
width:150px;
padding: 0;
height: 16px;
}
.fld { }
.usr {
border:solid 1px red;
height: 16px;
display: block;
float: left;
margin-right: 5px;
width: 7em;
}
p {
clear: both;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<label class="usr" for="email">Email*</label>
<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
<p>
<label class="usr" for="email">First Name*</label>
<input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter">
</p>
</body>
</html>
This renders the same way in IE/Safari/FF/Opera
This is one way to align:
<span>
<label>Email</label>
<input type="text" name="email" />
</span>
CSS:
form span {
vertical-align: middle;
display: block;
width: 100%;
}
form label {
display: inline-block;
float: none;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: left;
}
form input {
display: inline-block;
float: none;
width:auto;
margin:5px 0 0 10px;
padding:5px 5px;
}