css文本框点击时有边框 |css text不换行

/* 在CSS中设置文本框的边框 */
input[type="text"] {
border: 1px solid #ccc; /* 设置文本框边框的样式 */
padding: 3px; /* 设置文本框的内边距 */
border-radius: 5px; /* 设置文本框的圆角 */
}
/* 设置文本框点击时的样式 */
input[type="text"]:focus {
border: 2px solid blue; /* 设置文本框点击时的边框样式 */
outline: none; /* 去除文本框点击时的虚线 */
}

以上代码中，大家首先针对所有文本框(input[type=”text”])设置了一些基本的样式：边框(border)、内边距(padding)和圆角边框(border-radius)。然后，大家通过设置文本框被点击时的样式(input[type=”text”]:focus)来使其显示边框。在这里，大家将文本框的边框宽度加大，并将颜色设置为蓝色，以便更好地与其他元素进行区分。

需要注意的是，大家在这里去掉了文本框被点击时的虚线(outline:none)，因为有些浏览器默认会在文本框被点击时显示虚线，这样可能会影响页面的美观度。大家去掉虚线之后，就可以使文本框的边框更加整洁。

通过以上方法，大家便可以为文本框设置点击时有边框的效果。当然，如果你还需要设置其它样式，可以根据自己的需求进行调整。希望本文对大家有所帮助。