CODEWITHSUNDEEP
htmlcss
Anwar Hossain
Anwar Hossain

Reputation: 27

Highlight submit button when focus on input field in html

I am new in front-web development. I am creating a subscription form. I need to highlight the subscribe button when user clicks on the input field. How can I do it by using CSS? I don't want to use JavaScript. My HTML code is below:

HTML: 

<form>
     <input type="text" placeholder="Your email ID">   
     <input type="submit" class="submit_button" value="Subscribe">
</form>

Upvotes: 2

Views: 1891

Answers (1)

ashish singh
ashish singh

Reputation: 6904

http://jsbin.com/pagosokipu/edit?html,css,js,output

required css

input[type='text']:focus ~ input[type='submit']{ box-shadow: 0 0 2px 2px #555; }

read about ~ selector here .. https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors

Upvotes: 1

Related Questions