更改提交按钮不透明度输入：焦点

我所拥有的是一个搜索栏和一个图像作为submit按钮。我希望submit按钮的不透明度为0.5处于正常状态，1.0当搜索栏处于:focus时。更改提交按钮不透明度输入：焦点

这里是我的HTML：

<form id='searchThis' action='/search' method='get' style='display: inline;'> 
<input id='searchBox' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='display:inline;font-family:Segoe UI, Microsoft Tai Le, trebuchet MS,&apos;lucida grande&apos;;width: 155px;color:#636363;' type='text' value='Search' vinput=''/> 
<input id='submitsearch' alt='Search' height='20px' src='http://1.bp.blogspot.com/-Ab4nALwSEdw/T4LI1pym1LI/AAAAAAAABBA/_oQltx3svas/s320/search.png' style='display:inline; padding-left: 10px; margin-top:1px; position: absolute; opacity:0.5;' title='Search' type='image' width='20px'/> 
</form>

但我不知道我是否应该使用CSS或JavaScript和我不是很擅长无论是。

任何人都可以帮我吗？

来源

2012-10-07 FreedomRequiresWings

CSS：

#submitsearch { 
    opacity: 0.5; 

    -moz-transition: opacity 0.5s; 
     -ms-transition: opacity 0.5s; 
     -o-transition: opacity 0.5s; 
    -webkit-transition: opacity 0.5s; 
      transition: opacity 0.5s; 
} 

#searchBox:focus + #submitsearch { 
    opacity: 1.0 
}

来源

2012-10-07 14:21:04 newtron

是的！这就是我要找的！谢谢，但有什么办法让它淡入'：focus'并返回到正常状态？上面编辑的 – FreedomRequiresWings

。你会想使用'过渡'。 – newtron

完美。谢谢。 – FreedomRequiresWings

您可以使用CSS

#submitsearch:hover {opacity:0.5}

来源

2012-10-07 14:23:29 codingbiz

您可以使用CSS：当我向newtron公司的CSS3解决

#submitsearch { opacity: 0.75; } 
#submitsearch:hover, #submitsearch:active { opacity: 1; }

来源

2012-10-07 14:25:39

- 我通常鼓励的jQuery用于更大的跨浏览器兼容性; 下面是我通常会如何处理这种情况： http://jsfiddle.net/earthdesigner/qc6Qf/1/

来源

2012-10-07 14:35:09 earthdesigner

更改提交按钮不透明度输入：焦点

回答

相关问题