html - 在 html 中关注输入字段时突出显示提交按钮

Question

我是前端网络开发的新手。我正在创建订阅表格。当用户单击输入字段时，我需要突出显示订阅按钮。我如何使用 CSS 来做到这一点？我不想使用 JavaScript。我的 HTML 代码如下:

HTML:

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

Answer 1

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

需要CSS

input[type='text']:focus ~ input[type='submit']{
框阴影:0 0 2px 2px #555；
}

在这里阅读 ~ 选择器 .. https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors