在输入字段焦点上将标签设置为完全不透明

当输入字段处于焦点时，我有很多代码将标签设置为0.5不透明度。现在，如果可能，我想将其设置为0（100％隐身）。在输入字段焦点上将标签设置为完全不透明

有人可以帮忙吗？

我HTML：

<div class="fieldgroup"> 
    <label for="name">Name</label> 
    <input type="text" id="name" name="name"> 
</div><!--/.fieldgroup-->

我CSS：

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    font-family: Arial; 
} 
.fieldgroup { 
    position: relative; 
} 
input[type='text'], 
label { 
    padding: 5px; 
    font-size: 16px; 
    line-height: 16px; 
    margin: 0; 
    height: 30px; 
    color: #fff; 
    display: block; 
} 
input[type='text'] { 
    border: none; 
    background: green; 
}

我使用这个jQuery插件：http://fuelyourcoding.com/in-field-labels/

非常感谢:-)

来源

2013-07-19 michaelmcgurk

你已经知道这样做有什么problem.It需要1个字符编辑做到这一点。 – Musa

此外，你可能想打那个jsFiddle上的“TidyUp”按钮，所以它实际上是可读的。 – Schmalzy

当您应用插件到你的标贴，你可以通过传递一个选项设置不透明度的对象，像这样：

$("label").inFieldLabels({ fadeOpacity:0.0 });

来源

2013-07-19 16:04:10 Splendiferous

任何指针有代码的内场的标签代码，上面写着一行...

$.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300,labelClass:'infield'};

更改为...

$.InFieldLabels.defaultOptions={fadeOpacity:0.0,fadeDuration:300,labelClass:'infield'};

fadeOpacity:0.5到fadeOpacity:0.0

来源

2013-07-19 16:00:41 Schmalzy

有，做那个叫placeholder的HTML属性。但我不确定您是否可以对其应用淡入淡出效果。编辑：它可能与CSS转换和这个：Change an HTML5 input's placeholder color with CSS，但它是相当可怕的。

<input type="text" name="fname" placeholder="First name">

输入[名称：FNAME]：积极{ 颜色：绿色 }

来源

2013-07-19 16:01:56 sabof

的Javascript

$(document).ready(function() { 
$("#name").focus(function(){ 

$('#lblname').css({'opacity':'0'}); 

}); 
    });

编辑褪色EFFE克拉

$(document).ready(function() { 
$("#name").focus(function(){ 

$("#lblname").animate({ 'opacity':'0'},350); 

}); 
    });

HTML

<div class="fieldgroup"> 
<label for="name" id="lblname">Name</label> 
<input type="text" id="name" name="name"> 
</div><!--/.fieldgroup-->

来源

2013-07-19 16:06:59

尽管不受每个插件开发者实现，good practice主张插件受理选项对象。尽管不太清楚，但您可以覆盖fadeOpacity和fadeDuration选项。

为了解决您的问题，简单地传递一个选择对象，指定fadeOpacity像这样：

$(document).ready(function(){ 
    $('label').inFieldLabels({fadeOpacity: 0.0}); 
});

来源

2013-07-19 16:29:16 stavarotti

在输入字段焦点上将标签设置为完全不透明

回答

相关问题