I have a form label as follows:
<label id="jform_email-lbl" for="jform_email" class="hasTip required"
title="Email Address::Please enter the email address associated with your User
account.<br />A verification code will be sent to you. Once you have
received the verification code, you will be able to choose a new password for
your account.">Email Address:<span class="star"> *</span></label>
I want to apply a different style to my popover 'title' element (#000).
Not the 'Email Address:' label that shows on the form (which is #fff).
Thought I may be able to do the following, but it doesn't work:
label#jform_email-lbl[type="title"] {
color: #000;
}
****EDITED**
The answer is as follows - for anyone else trying to find the right css:**
div.tip .tip-title {
color: #E77600 !important;
font-weight: bold;
}
div.tip .tip-text {
color: #979797 !important;
font-weight: bold;
}
Later edit, i understood the question :
<!DOCTYPE html>
<html>
<head>
<style>
label {
color: #900;
text-decoration: none;
}
label:hover {
color: red;
position: relative;
}
label[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: red;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
</style>
</head>
<label id="jform_email-lbl" for="jform_email" class="hasTip required" title="something">Email Address:<span class="star"> *</span></label>
</html>
Related
I know there are a lot of examples for customizing the tooltip of an html element but I can't make it working.
I have a simple anchor that looks like the following:
?
And then I created the following css style (I copied from an example):
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #1111ee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #11eeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
As you can see in the fiddle I created, the result is not what I expect.
So, what do I have to change?
https://jsfiddle.net/Bonomi/36kp45e2/1/
Just make the positioning of the a tag relative
a[title] {
position: relative;
}
That way your tooltip will now be absolute to the anchor tag, not to the document.
Updated fiddle:
https://jsfiddle.net/36kp45e2/2/
Ho to all,
I got this problem :
<input type ="file" name ="fileUpload">
I Made a file input that by default dispalys "choose a file".
I don't really like it so i want to make it like a Button the problem Is that when i try to surround it with Button tag or span with a Button property
I would like to know if i can hide the "choose a file" Making the file input tag like a single Button
Thanks for your future answers
Have a nice day
Luca
<style>
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.upload {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<div class="fileUpload">
<span>Upload</span>
<input type="file" class="upload" />
</div>
Just wrap it around a span and give color:white to span. For example like this http://jsfiddle.net/25bju0a4/
<style type="text/css">
.button {
width: 124px;
height: 27px;
}
.button::-webkit-file-upload-button {
visibility: hidden;
}
.button:before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #F9F9F9, #E3E3E3);
background: -moz-linear-gradient(top, #F9F9F9, #E3E3E3);
background: -ms-linear-gradient(top, #F9F9F9, #E3E3E3);
background: -o-linear-gradient(top, #F9F9F9, #E3E3E3);
background: linear-gradient(top, #F9F9F9, #E3E3E3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.button:hover:before {
border-color: black;
}
.button:active:before {
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#E3E3E3), to(#F9F9F9));
background: -webkit-linear-gradient(top, #E3E3E3, #F9F9F9);
background: -moz-linear-gradient(top, #E3E3E3, #F9F9F9);
background: -ms-linear-gradient(top, #E3E3E3, #F9F9F9);
background: -o-linear-gradient(top, #E3E3E3, #F9F9F9);
background: linear-gradient(top, #E3E3E3, #F9F9F9);
}
</style>
<input type ="file" name ="fileUpload" class=button>
I am following this tutorial to create CSS 3 button with Icon. But the problem in this tutorial Icon height depends on font-size. If I increase font-size of text, icon fits well but if I try to reduce the font-size, it doesn't fit well.Image I am using is 40x30
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 15px;
font-weight: bold;
}
a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}
a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
display: block;
background: url(../img/gmail2.png) no-repeat;
}
Your statement is a little ambiguous and lacks a question, but I'll take a stab.
In this scenario, font-size will always play a small factor, as it will determine the height of the icon. At some point you are going to need to know some details about the button size, but it doesn't have to be affected by font. If you set the button height and the img{ height:100%; } the image will scale to fit the area.
<div id="container">
<h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>
combined with
#container{
border: 2px solid black;
width: 200px;
height: 20px;
}
#container img{
height:100%;
}
Should get you something you close to what you're looking for. I've whipped up a small jsfiddle to demonstrate one way to accomplish this.
It would be helpful if you could share your code.
In the css3 buttons examples of the link you provided, if I decrease font-size and set the following CSS style, works.
span { display: block; }
span is the tag that wraps the text inside the buttons.
I currently have a link and I'm using it as a button look to it and I would like to add an icon to it.
Example: a plus sign + icon next to a word that will say Add User. Here is my link:
<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'>Cancel</a>
Here is my .glossyBtn style:
.glossyBtn
{
display: inline-block;
background-color: #c1e2f4;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #b1daf1);
background-image: -moz-linear-gradient(top, #eeeeee, #b1daf1);
background-image: -ms-linear-gradient(top, #eeeeee, #b1daf1);
background-image: -o-linear-gradient(top, #eeeeee, #b1daf1);
background-image: linear-gradient(top, #eeeeee, #b1daf1);
border: 1px solid #3e95c8;
border-bottom: 1px solid #3e95c8 !Important;
border-radius: 3px;
color: #046fad !Important;
font: bold 12px Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 5px 12px;
text-align: center;
text-shadow: 0 1px 0 #eee;
text-decoration: none;
cursor: pointer;
list-style: none;
float: left;
margin-top: 5px;
margin-right: 5px;
}
Live demo: Tinkerbin
I haven't tested this, but the following should work with proper positioning:
<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'><span><img src="plus.png" alt=""></span>Cancel</a>
By prefixing the text with a <span> containing an <img>, you can insure the image stays inline with the text on the right.
Use the :after pseudo-selector:
.glossyBtn:after {
content: '+';
padding-left: 5px;
}
Live demo: Tinkerbin
If you want to add the plus character before the text, use :before pseudo-selector:
.glossyBtn:before {
content: '+';
padding-right: 5px;
}
Live demo: Tinkerbin
I've added padding left/right, to make some space between the text and the plus character.
I'm following the example posted here for making custom css tooltips.
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 99;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
I am wondering if there is a way to not have the tooltip push out it's parent elements outline in FireFox, it seems to work fine in Chrome
div {
display: inline-block;
padding: 20px;
border: 2px solid #000;
outline: 2px solid #F00;
}
see example here
I don't see how you can possibly fix this. I wonder if this is a Firefox bug?
The only thing that comes to mind is to use box-shadow instead of outline:
http://jsfiddle.net/thirtydot/HgeVh/9/
This has the downside that you're losing the outline in IE8, if that matters.