I am currently working on an HTML5 form and using CSS3 for the styling. I have added CSS for input:required and input:valid and input:invalid to make an image get shown inside the text box.
Both the required and invalid CSS work fine but for some reason input:valid gets ignored and is just replaced with the same image as input:required.
Below is the CSS that I have used
input:required.fields, textarea:required.fields, select:required.fields
{
background:url("images/asterix.png") no-repeat;
background-position: right;
width: 200px;
background-color: white;
}
input:focus:required:invalid.fields, textarea:focus:invalid.fields, select:focus:invalid.fields
{
background:url("images/error.png") no-repeat;
background-position: right;
width: 200px;
background-color: white;
opacity: 1.0;
}
Both CSS sections above work fine without any problems but its the CSS below that for some reason is not working.
input:valid.fields, textarea:required:valid.fields, select:value.fields
{
background:url("images/tick.png");
background-position: right;
width: 200px;
background-color: white;
opacity: 1.0;
}
In case it was to do with the image not being found I made the invalid image be the tick.png image and this worked fine but the valid section never seems to get called.
Thanks for any help you can provide.
I just used the following on my form:
input[required]:invalid {
background: #efdee0 url(../images/invalid.png) no-repeat center right;
}
input[required]:valid {
background: #f3f8ed url(../images/valid.png) no-repeat center right;
}
but then my fields are all required (http://www.paul-ellis.co.uk/contact.htm)
Related
I have an HTML code :
<li class="bath-icon">bath</li>
Where class="bath-icon" is defined in CSS as :
.bath-icon a {
background: url('images/room_bath.png');
background-size: auto 40%;
background-repeat: no-repeat;
background-position: 50% 20px;
background-color: #7E7C14;
opacity: 0.8;
}
Now I want to replace background image room_bath.png with an image from a sprite image with values as:
.room_bath {
width: 107px;
height: 64px;
background: url('images/sprite.png') -0 -952px;
}
Can anyone help me how both CSS can be cascaded and background image from sprite is inserted in .bath-icon class?
You can create variable in css and refer the variable in your css declaration.
:root {
--room-bath-bg: url('images/sprite.png') -0 -952px;
}
.bath-icon a {
background: var(--room-bath-bg);
background-size: auto 40%;
background-repeat: no-repeat;
background-position: 50% 20px;
background-color: #7E7C14;
opacity: 0.8;
}
Like above you can create your variable and refer in any places. The variable declaration should start with -- to identify the system.
NOTE: This mehtod is supported by only modern browsers.
Refer this W3 Schools CSS3 Variables to learn more details about this.
my problem seems to be quite simple. I want to create the button which is png and has hover via .png also. I need this for email campaigns becouse Outlook doesn't understand some css attributes.
I tried make it simple
.button {
border: none;
background: url(/image1.png);
}
.button:hover {
border: none;
background: url(/image2.png);
}
And everything is just white. Any help will be great :)
according to documentation, you should do it like that,
background: url("/image1.png");
.button {
width: 50px;
height: 50px;
border: none;
background: url("https://i.stack.imgur.com/teLso.jpg?s=48&g=1");
}
.button:hover {
border: none;
background: url("https://graph.facebook.com/160520007817300/picture?type=large");
}
<button class="button"></button>
You have an error, use the simple, or double quotes "" - '', an example:
button{
background: url('https://s-media-cache-ak0.pinimg.com/736x/24/fe/e1/24fee13b4dc475c435984ab0aa1b8ecb.jpg');
background-size: 500px 100px;
background-position: center;
width: 500px;
height: 40px;
}
<button> Example button </button>
Same with any of the other html elements.
I am using the HTML button tag for my submit buttons as well as buttons that direct to other pages and features I would like to be able to have buttons with different backgrounds (one blue, one grey, one red, one green, etc) but can't seem to get it working by simply adding a class tot he button tag.
Here is what I have so far
HTML
<button class="green_btn" type="submit" name="cnp">News Control</button>
CSS
button {
margin: 0 auto 5px auto;
display: block;
width: 134px;
height: 35px;
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
border: 0 none;
font-weight: bold;
text-align: center;
color: #fff;
cursor: pointer;
}
.grey_btn button {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
.green_btn button {
background: url('../images/green_btn_bg.png') no-repeat left;
}
.ltblue_btn button {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
.blue_btn button {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
.red_btn button {
background: url('../images/red_btn_bg.png') no-repeat left;
}
by default I want the button to be the garkgrey_btn_bg.png as the background, but if I want to use the green_btn_bg.png for the background, adding class="green_btn" to the html does nothing.
Anyone have any ideas?
You're targeting your class improperly with .class-name button. That is actually looking for an element with a child button.
Here you go...
button.grey_btn {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
button.green_btn {
background: url('../images/green_btn_bg.png') no-repeat left;
}
button.ltblue_btn {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
button.blue_btn {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
button.red_btn {
background: url('../images/red_btn_bg.png') no-repeat left;
}
Your classes are looking for a button inside an element with a colour class. For example:
.red_btn button
...is looking for a button inside a parent element with the class red_btn. It should in fact be:
button.red_btn
...though the button part of the selector is probably redundant unless you have other elements of different types with the same class names.
For anyone that ends up here who, like me, wasn't sure how to change a button's background color...
Instead of this in your CSS file:
#footer_join_button {
background-color: $light_green;
}
... or even:
#footer_join_button {
color: $light_green;
}
... the correct attribute/property to target is simply background:
#footer_join_button {
background: $light_green;
}
Note: I'm using SASS precompiler, hence the potentially strange-looking $light_green variable above.
What I want:
Current Code
<div class="grid3"><h1 class="lines">Welcome!</h1> <p class="lines2">Text</p></div>
.lines { color: #d5a72b; padding-right: 4px; float: left;}
.lines2 { text-indent: -999999px; background: url('../images/line.png') repeat-x; }
What I get:
I'd do it like this:
<h1><span>Heading</span></h1>
h1 {
background-image: url("lines.png") left middle repeat-x; }
h1 span {
background: #bgcolor;
padding: 1em; }
It's a hack, but I don't believe even CSS3 currently has a solution for this problem except possibly border-image, however that still isn't supported by IE10.
So I've got a series of clickable images in my page. I've tried to optimise this by generating a single image containing all the images I need and I intend to use sprites to select the one I want. I'm having trouble figuring out the best way to add anchor tags to the sprites though?
So I'm after a clickable HTML element that supports sprites, preferably without using JavaScript. I can do it using JavaScript but I'd prefer to avoid it.
OK, here's my code, what there is:
.touringEscorted {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: 0 0;
}
.touringNew {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: -10px 0;
}
I've tried
<div class="touringEscorted">
and
and several others. Seems there's no way to use sprites/background images and anchor tags at the same time. Am I right?
Any suggestions?
Ok then :
Should work, but adding display:block; to the CSS :
.touringEscorted {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: 0 0;
display:block;
}
Like this?
<a class="sprite sprite1" href="javascript:;">Link Text</a>
sprite {
display: block;
background: url(path/to/image/file.ext);
text-indent: -9999px;
}
sprite1 {
width: WWpx;
height: HHpx;
background-position: -NNpx - MMpx;
}
Doesn't Google consider off screen text as spammy? I came up with a modification. I put the link in another element, in this case a table. I added the background image class in the element and in the link like this:
CSS code:
.sprite{
background: url('images/sprite.png') no-repeat top left;
}
.sprite.termite {
background-position: 0px -499px;
width: 150px; height: 113px;
display: block;
}
HTML code:
<td class="td sprite termite">
</td>
It renders the image in the table perfectly and clicks!