编辑文本时,输入标记中的边框颜色不起作用(CSS3)

68bkxrlz  于 2023-02-14  发布在  CSS3
关注(0)|答案(1)|浏览(187)

我想做一个blue风格的CSS框架。我现在正在处理 * input * 标签,我想在里面使用 * Border-color *。但是,当我编辑文本时,它会变成黑色而不是这个颜色。
下面是我的代码:
CSS:

input[class*=bright][type=text]::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgb(150,230,255);
}
input[class*=bright][type=text]::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgb(235,255,255);
    opacity: 1;
}
input[class*=bright][type=text] {
  color:rgb(50,200,255);
  background:rgb(235,255,255);
  border-style:solid;
  border-color:rgb(50,200,255);
  border-radius:5px;
}

HTML:

<input class="bright" type="text" placeholder="test">

边框将是黑色的,当我测试它在边缘和 chrome ,他们都显示黑色边框。
我也试过这个,但也不起作用:

input[class*=bright][type=text]:active{
  border-color:rgb(50,200,255);
}

我想知道是否有一个解决方案,使它的工作时,编辑,或改变成不同的焊接机颜色时,编辑文本。
我想要一个CSS3唯一的解决方案,因为这只是一个框架的CSS3。

6ovsh4lw

6ovsh4lw1#

试试这个,看看它是否适合你的要求:

input[class*=bright][type=text]::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: rgb(150, 230, 255);
}

input[class*=bright][type=text]::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgb(235, 255, 255);
  opacity: 1;
}

input[class*=bright][type=text] {
  color: rgb(50, 200, 255);
  background: rgb(235, 255, 255);
  border-style: solid;
  border-color: rgb(50, 200, 255);
  border-radius: 5px;
}

input[class*=bright][type=text]:focus {
  outline: none !important;
  border-color: rgb(50, 200, 255);
}
<input class="bright" type="text" placeholder="test">

相关问题