单击时更改文本框边框 [英] Change text box border when it is clicked

问题描述

我正在制作网站，希望文字框的边框颜色在悬停时以及点击时发生变化。

I am making a website and would like the border color of the text boxes to change on hover and when they are clicked.

我已经搜索，并发现一些人显示的代码如何做。我试图运行它从我的LAMP服务器（不知道如果嵌入的JS将工作在灯服务器），虽然它没有工作。代码是javascript，我真的不知道，所以我不明白什么是错的。

I have searched and found a few people showing the code for how to do it. I tried to run it from my LAMP server (dont know if embedded JS will work on a Lamp server) although it didnt work. The code was javascript which I don't really know so I couldn't understand what what was going wrong.

这是代码：

This is the code:

onload=function(){
    var inp=document.getElementsByTagName('input'), i=0, t ;
    while(t==inp[i++]){
        if(t.type=='text'){
            t.onclick=function(){this.style.border='1px solid red'}
        }
    }
}

</script>

有没有办法做我想要的只是CSS / HTML或我需要学习还有JavaScript吗？

Is there a way to do what I am wanting just with CSS/html or will I need to learn JavaScript as well?

如果不太难解释怎么做，或者给我看一些示例代码？

If its not too hard could explain how to do it or show me some example code?

Cheers - Cohen。

Cheers - Cohen.

推荐答案

是的，可以使用CSS伪类完成

Yes this can be done using CSS pseudo-classes

以下是一个示例：

<style>
  .fancyText:hover{border:1px solid red;}
  .fancyText:focus{border:1px solid red;}
</style>
<input type='text' class='fancyText' />

这篇关于单击时更改文本框边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！