如何在谷歌自定义搜索引擎中添加焦点发光“点击搜索框时”效果？答案

【问题标题】：How to add Focus glow "when clicked on search box" effect in google custom search engine?如何在谷歌自定义搜索引擎中添加焦点发光“点击搜索框时”效果？
【发布时间】：2019-08-23 05:58:19
【问题描述】：

如何让 cse 框在有人点击时发光？我尝试了下面的 css 代码，但它不起作用。我在添加焦点属性时遇到了困难

.gs_tti50:focus
{
    padding:0px !important;
    border-style: solid;
        border-width:1px;
        border-color: grey;
        border-radius:20px
  }
.gsc-i-id1
{
    height:33px !important;
    padding:0px !important;
    text-indent:10px !important;
    background:white;
    border-radius:20px;
    }

【问题讨论】：

标签： css

【解决方案1】：

希望这行得通！

.gs_tti50:focus
{
  outline: 2px solid blue;   
}

【讨论】：

【解决方案2】：

您的 css 代码没有似乎有任何问题。尝试添加box-shadow 属性。

.gs_tti50:focus {
  padding: 0px !important;
  border: 1px solid #FF0000;
  border-radius: 20px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
  outline: none;
}

.gsc-i-id1 {
  height: 33px !important;
  padding: 0px !important;
  text-indent: 10px !important;
  background: white;
  border-radius: 20px;
}

&lt;input class="gs_tti50" type="text"&gt;

旁注：如果可能，请避免将 !important 与 css 属性一起使用。更多信息：Is it bad to use !important in css property

【讨论】：