0

尝试使输入框执行以下操作：正常状态输入框文本为 x，悬停状态输入文本为 y，您是否将框保留为 z，并且可以再次在所有状态中保持 z。

-更新有一个搜索框，其中背景图像和文字淡出，一旦你悬停它是生动的，一旦你聚焦它，它是生动的2px边框，但是一旦你离开它我就松散了：（所以需要一个让它保持生动的背景图片（其中有 x 和 y，每个状态一个）和文本但松开 2px 边框的技巧

---UPDATE ---
/* Search box */
.searchbox {
    background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
    width:240px; 
    margin-right:4px; 
    margin-left:11px; 
    color:#cccccc;   
    vertical-align: top; 
    padding: 4px 2px 4px 79px;
    border-color: #4FA4F9;
}
.searchbox:hover {
    background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
    color:#888888; 
}
.searchbox:focus {
    background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
    width:239px; 
    color:#888888; 
    padding: 3px 2px 3px 78px;
}
.searchbox.blur {
    background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
    width:239px; 
    color:#000000; 
    padding: 4px 2px 4px 79px;
}

@-moz-document url-prefix() {
    .searchbox {
    background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
    }
}
@-moz-document url-prefix() {
    .searchbox:hover {
    background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
        }
}
@-moz-document url-prefix() {
    .searchbox:focus {
    background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
    }
}

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}
input, select, textarea {
  margin: 1 0 0;
}
input, textarea, .date {
  border: 1px solid #aaa;
  border-radius: 3px;
  color:#333;
}
input {
  font-size: 13px;
  padding: 0px;
}
textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  padding: 4px 4px 4px 4px;
}

select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;

}

--- html ---

<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>

---js----

/* Search Box Leave */
$(".searchbox").blur(function(){
    $(this).addClass("blur");
});
4

4 回答 4

5

你可以通过设置一个类来使用 jQuery 来做到这一点。

$(".searchable").blur(function() {
    $(this).addClass("blur");
});

然后在你的CSS中你可以像这样设置颜色

.searchable.blur
{
  color:#000;   
}

​ 这是一个 jsfiddle 示例 -> http://jsfiddle.net/y46Wk/2/

请记住，除非您删除该类，否则该元素不会再次显示其悬停颜色。

于 2012-07-19T12:40:04.303 回答
1

这不是您问题的真正答案....但我感觉您正在对表单进行一些验证，所以为什么不查看像这样的 jQuery 验证插件 http://docs.jquery.com/插件/验证

这是其他与表单相关的 jQuery 东西的列表 http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/

如果它们都没有帮助，也许你可以告诉我们哪一个接近，让我们知道你想要什么;-)

于 2012-07-19T12:49:55.027 回答
1

您是否尝试这样做：http: //jsfiddle.net/akhurshid/y46Wk/4/

于 2012-07-19T12:51:15.587 回答
1

您所描述的（保持状态）在技术上仅使用 CSS 是可行的。

这是一篇解释该过程的文章。总之，您使用由焦点触发的过渡状态来保持样式应用于元素。我并不提倡它是最好的方法，但是看看你可以用 CSS3 属性做什么真的很有趣。

更多的是好奇而不是直接的答案，但希望它对你/其他遇到这个问题的人有帮助:)

于 2012-07-19T12:53:30.577 回答