I expected a search button inside the search bar, which has the same function as the search button in the result page, or a magnifier icon as the search button (that appears on the right side after the is text entered).
Imagine an user like me entering some text into the search bar by the left hand, then I want to start searching by pressing the Enter key in the keyboard. But at that moment my right hand is still holding the mouse.
When I need to search for something, in most cases, the moment is viewing some content that I can't understand. As it isn't typing, my right hand usually hold the mouse for scrolling the page.
Let's see how Google handles this problem. When I start searching from an empty start page, there is no search button.
Then when I entered the searching result page, the search button appears because more content shows up. If I want to go searching further, I will select some words by mouse first, then copy and paste it into the search bar, and click the search button.
And here is a demo of my expectation.
* {
box-sizing: border-box;
}
.ps-relative {
width: 60%;
position: relative !important;
}
.s-input {
-webkit-appearance: none;
width: 100%;
margin: 0;
padding: .6em .7em;
border: 1px solid #bbc0c4;
border-radius: 3px;
box-shadow: 0 0 0 rgba(255,255,255,0);
font-size: 13px;
font-family: inherit;
line-height: 1.15384615;
}
.s-input.s-input__search:placeholder-shown {
padding-left: 32px;
}
.top-bar .searchbar .s-input {
border-color: #bbc0c4;
background-color: #FFF;
box-shadow: none;
color: #3b4045;
}
.s-input__search:placeholder-shown ~ .s-input-icon.s-input-icon__search {
right: auto;
left: .7em;
color: #bbc0c4;
}
.svg-icon:not(.native) * {
fill: currentColor;
}
.s-input-icon {
position: absolute;
top: 50%;
right: .7em;
margin-top: -9px;
}
.s-input-icon.s-input-icon__search {
right: .5em;
left: auto;
color: #66ccff;
}
.s-input__search:placeholder-shown ~ .s-input-icon{
pointer-events: none;
}
.s-input__search ~ .s-input-icon:hover{
cursor: pointer;
}
<div class="ps-relative">
<input name="q" type="text" placeholder="Search…" value="" autocomplete="off" maxlength="240" class="s-input s-input__search js-search-field " aria-label="Search" aria-controls="top-search" data-controller="s-popover" data-action="focus->s-popover#show" data-s-popover-placement="bottom-start">
<svg aria-hidden="true" class="svg-icon s-input-icon s-input-icon__search iconSearch" width="18" height="18" viewBox="0 0 18 18" onclick="alert('Search')"><path d="M18 16.5l-5.14-5.18h-.35a7 7 0 1 0-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0z"></path></svg>
</div>
Enter
key on both sides of the keyboard @user400654 ;) (I don't have one of those keyboards, that would be weird.)