CODEWITHSUNDEEP
css
Shaukat Raj
Shaukat Raj

Reputation: 21

How to add Focus glow "when clicked on search box" effect in google custom search engine?

How can i make cse box glow when someone clicked on it? i tried the below css code but it doesn't work.I am facing difficulty in adding the focus property 

.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;
    }

Upvotes: 2

Views: 121

Answers (2)

Soothran
Soothran

Reputation: 1243

your css code does not seems to have any problem. Try adding box-shadow property.

.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;
}
<input class="gs_tti50" type="text">

Side note: If possible avoid using !important with css properties. More info: Is it bad to use !important in css property

Upvotes: 1

Jothi Basu
Jothi Basu

Reputation: 176

Hope this works!

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

Upvotes: 1

Related Questions