diff --git a/js/button-input.js b/js/button-input.js index c5ad677..40b18e9 100644 --- a/js/button-input.js +++ b/js/button-input.js @@ -42,8 +42,16 @@ function buttonInputClick() { this.style.display = null } }) + + input.addEventListener("keypress", function(event) { + if (event.key === "Enter") { + event.preventDefault(); + button.click(); + } + }); this.parentNode.insertBefore(buttonInput, this.nextSibling) + input.focus() } document.addEventListener('DOMContentLoaded', () => { diff --git a/styles.css b/styles.css index 3f8aa74..3ce7638 100644 --- a/styles.css +++ b/styles.css @@ -24,6 +24,10 @@ img.u-featured { button.icon-button { line-height: 24px; + background-color: #666289; + color:#fff; + border:none; + border-radius:4px; } button.icon-button>img { max-height: 24px; @@ -33,6 +37,23 @@ button.icon-button>img { .button-input-container>label{ display:block; } +.button-input-container>input{ + background-color: #666289; + color:#fff; + border:none; + border-radius: 4px; + padding: 4px 66px 4px 6px; + margin-right: -60px; +} +.button-input-container>input:focus{ + border:none; +} +.button-input-container>button{ + background-color: #666289; + color:#fff; + border-radius: 4px; + border-color: #fff; +} i>img{ max-height: 1em; vertical-align: middle;