2013-10-17 23 views
2

的标题元素我有一个表单标签如下:如何应用CSS样式,弹出标签

<label id="jform_email-lbl" for="jform_email" class="hasTip required" 
title="Email Address::Please enter the email address associated with your User 
account.&lt;br /&gt;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">&#160;*</span></label> 

我想不同的风格应用到我的酥料饼的“标题”元素(#000)。

不是表单上显示的“电子邮件地址:”标签(即#fff)。

以为我也许能做到以下几点,但它不工作:

label#jform_email-lbl[type="title"] { 
    color: #000; 
} 

**** EDITED ** 的答案如下 - 其他任何人试图找到合适的CSS:**

div.tip .tip-title { 
    color: #E77600 !important; 
    font-weight: bold; 
} 
div.tip .tip-text { 
    color: #979797 !important; 
    font-weight: bold; 
} 
+0

标题已黑,你正在尝试ŧ实现? –

+0

在我的CSS我有标签{颜色:#fff;} - 我想离开这一个人。但是当你将鼠标悬停在标签上时,从'标题'元素弹出/显示的文本也是白色的 - 我希望这是#000 – user991830

+0

@ user991830检查我的答案http://jsfiddle.net/zanTf/1/我将更新 – falguni

回答

3

后来编辑,我明白了一个问题:

<!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">&#160;*</span></label> 

</html> 
+0

不完全工作 - 这里是网站/表单标签的网址http://www.foxwellassociates.co.uk/account-login?view=reset悬停在标签上,你会选择我意思是 – user991830

+0

作为如何你可以看到这里:http://jsfiddle.net/fQwbU/ 如果你不把相对的标题将悬停命令将不再显示红色:)你是错过 –

+0

罗伯特Voicu - 我已经放弃你的CSS到Chrome Inspector上http://www.foxwellassociates.co.uk/account-login?view=reset - 它改变了标签的颜色,但不是弹出标题文本的内容:( – user991830