当前位置：文江博客话题详情

当选择文本输入时如何更改 CSS？

发布于 2024-12-21 20:06:45 字数 105 浏览 3 评论 0原文

我想在选择文本框时更改的 CSS；即当用户单击文本框时，我希望应用不同的 CSS 规则。有没有办法使用纯 CSS 来做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

百变从容 2024-12-28 20:06:45

您是否尝试过焦点伪类

:focus

Have you tried the focus pseudo-class

:focus

more info: http://reference.sitepoint.com/css/pseudoclass-focus

回复收藏 0 原文

无妨# 2024-12-28 20:06:45

选择仅具有文本属性的输入字段

input[type="text"]:focus{background-color:yellow;}

选择任何输入字段（复选框、文件、隐藏、图像、密码、单选、重置、提交、文本）

input:focus{background-color:yellow;}

选择任何文本区域

textarea:focus{background-color:yellow;}

好的，这是由 CSS 实现的，但是如果您希望实现平滑的动画效果并且可以更好地控制焦点/模糊，最好使用 JQuery 或其他 JavaScript 框架。

select the input fields which have attribute of text only

input[type="text"]:focus{background-color:yellow;}

Select any input field (checkbox,file,hidden,image,password,radio,reset,submit,text)

input:focus{background-color:yellow;}

Select any textarea

textarea:focus{background-color:yellow;}

OK that's by CSS however if you are looking to achieve smooth animated effects and have more control over focus/blur it is better to use JQuery or other JavaScript frameworks.

回复收藏 0 原文

如日中天 2024-12-28 20:06:45

是的。使用 :focus 伪类选择它。

演示位于 http://dabblet.com/gist/1490497

回复收藏 0 原文

狼亦尘 2024-12-28 20:06:45

中使用以下内容

您可以在 CSS E::selection

，其中 E 是元素。

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

您可以还可以使用 jquery 使用

$('#element').attr('class', 'new value');

You can use the following in CSS

E::selection

where E is the element.

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

You can also use jquery using the

$('#element').attr('class', 'new value');

回复收藏 0 原文

山川志 2024-12-28 20:06:45

<script>
function change(objNum){
    var objName = "txtbox";
    window.alert(objNum);

    document.getElementByID(objName).className = "franchlinks";

}
</script>

<input type="text" class="yourdefaultclass" id="txtbox1" onclick="change('txtbox1');">

尝试这样。对于失去焦点，您可以尝试 onblur 而不是 onclick。

<script>
function change(objNum){
    var objName = "txtbox";
    window.alert(objNum);

    document.getElementByID(objName).className = "franchlinks";

}
</script>

<input type="text" class="yourdefaultclass" id="txtbox1" onclick="change('txtbox1');">

Try like this. for lost focus you may try onblur instead of onclick.

回复收藏 0 原文

~没有更多了~