我们点击文本字段内的光标后，背景颜色会发生变化

Question

一旦我们在文本字段中单击光标，背景颜色就会发生变化。

之前：

一旦我们点击文本字段中的光标：

但是我希望在文本字段中单击光标后保持相同的颜色。

CSS

input.input-text, select, textarea {
    font: /*BEGIN:general_font*/12px/1.35 Arial, Helvetica, sans-serif/*END:general_font*/;
    padding: 2px 8px !important;
    border: 1px solid /*BEGIN:body_line1*/#dcdcdc/*END:body_line1*/;
    color: /*BEGIN:body_text_color3*/#a0a0a0/*END:body_text_color3*/;
    height: 29px;
    line-height: 29px;
    width: 80%;
}

input, select, textarea, button {
    vertical-align: middle;

}

PHTML

<input type="text" class="input-text" name="s" placeholder='<?php echo $helper->__('Search by product name') ?>' 
value="<?php echo $this->getRequest()->getParam('s')?>"/>

Answer 1

在CSS中添加

CSS，

input:focus { background : none; }

减少或增加输入的使用余量之间的间距：10px 0px;

CSS，

input.input-text, select, textarea {
font: /*BEGIN:general_font*/12px/1.35 Arial, Helvetica, sans-serif/*END:general_font*/;
padding: 2px 8px !important;
border: 1px solid /*BEGIN:body_line1*/#dcdcdc/*END:body_line1*/;
color: /*BEGIN:body_text_color3*/#a0a0a0/*END:body_text_color3*/;
height: 29px;
line-height: 29px;
width: 80%;
**margin:10px 0px;**

}

Answer 2

在您的代码中删除此媒体查询，它可以正常运行:)

@media (min-width: 0)
:focus {
     background: none; 
}