Amazon Searchbar or Searchbox Css/html style 08.09.21

<!DOCTYPE html>
<html class="a-ws a-js a-audio a-video a-canvas a-svg a-drag-drop a-geolocation a-history a-webworker a-autofocus a-input-placeholder a-textarea-placeholder a-local-storage a-gradients a-text-shadow a-box-shadow a-border-radius a-border-image a-opacity a-transform a-transition null" lang="en-us" data-19ax5a9jf="dingo" data-aui-build-date="3.21.6-2021-09-02" data-useragent="Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko" data-platform="Win32">
<head>
<title></title>
<style>
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.nav-fill {
	width: auto;
	overflow: hidden;
	white-space: nowrap;
}
form {
	margin-bottom: 14px;
}
.nav-left {
	position: relative;
	float: left;
	width: auto;
	display: inline-block;
}
.nav-right {
	position: relative;
	float: right;
	width: auto;
	display: inline-block;
}
.nav-icon {
	background-repeat: no-repeat;
}
.nav-sprite-v1 .nav-sprite, .nav-sprite-v1 .nav-icon {
	background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/gno/sprites/nav-sprite-global-1x-hm-dsk-reorg._CB405937547_.png);
	background-position: 0 1000px;
	background-repeat: repeat-x;
}
button, input[type=button], input[type=reset], input[type=submit] {
	cursor: pointer;
}
.a-input-text, input[type=text], input[type=search], input[type=number], input[type=tel], input[type=password], input[type=date], input[type=email] {
	background-color: #fff;
	height: 31px;
	padding: 3px 7px;
	line-height: normal;
}
input, select, textarea {
	transition: all .1s linear;
	line-height: 19px;
	color: #0f1111;
}
#navbar * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#nav-search {
	position: relative;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	padding: 10px 4px 0 3px;
	height: 60px;
	-webkit-border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
	border-radius: 0	;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: auto;
}
.nav-flex#navbar #nav-belt #nav-search {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
	-webkit-box: 1;
	-moz-box: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 10px 4px 10px 3px;
}
.layout3.nav-flex#navbar #nav-belt #nav-search, .layout3.nav-flex#navbar #nav-belt .nav-fixed#nav-search, .nav-fixed.layout3.nav-flex#navbar #nav-belt #nav-search, .nav-fixed.layout3.nav-flex#navbar #nav-belt .nav-fixed#nav-search {
	padding: 10px 4px 10px 3px;
	height: 60px;
}
/* @media all and (min-width:1100px) */
.layout3.nav-flex#navbar #nav-belt #nav-search, .nav-fixed.layout3.nav-flex#navbar #nav-belt #nav-search {
	margin: 0 6px;
}
/* @media all and (min-width:1300px) */
.layout3.nav-flex#navbar #nav-belt #nav-search, .nav-fixed.layout3.nav-flex#navbar #nav-belt #nav-search {
	margin: 0 10px;
}
/* @media all and (min-width:1700px) */
.layout3.nav-flex#navbar #nav-belt #nav-search, .nav-fixed.layout3.nav-flex#navbar #nav-belt #nav-search {
	margin: 0 18px;
}
#nav-belt .nav-fill, #nav-belt .nav-left, #nav-belt .nav-right, #navbar .nav-belt .nav-fill, #navbar .nav-belt .nav-left, #navbar .nav-belt .nav-right {
	height: 43px;
}
#nav-belt .nav-fill, #navbar .nav-belt .nav-fill {
	overflow: visible;
}
.nav-flex#navbar .nav-fill {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
	-webkit-box: 1;
	-moz-box: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.nav-flex#navbar .nav-left, .nav-flex#navbar .nav-right {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
}
#nav-search .nav-searchbar .nav-fill, #nav-search .nav-searchbar .nav-left, #nav-search .nav-searchbar .nav-right {
	position: relative;
	top: -5px;
	height: 35px;
}
#nav-search .nav-searchbar .nav-fill {
	overflow: hidden;
}
#nav-search .nav-searchbar .nav-right {
	min-width: 0px;
}
.nav-flex#navbar #nav-belt .nav-fill, .nav-flex#navbar #nav-belt .nav-left, .nav-flex#navbar #nav-belt .nav-right {
	height: auto;
}
.nav-bluebeacon#navbar #nav-search .nav-fill {
	height: 35px;
	zoom: 1;
}
.layout2#navbar #nav-belt .nav-fill, .layout2#navbar #nav-belt .nav-left, .layout2#navbar #nav-belt .nav-right {
	height: 60px;
}
#nav-belt, #navbar .nav-belt {
	position: relative;
	width: 100%;
	font-size: 14px;
	z-index: 5;
}
.nav-flex#navbar #nav-belt {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
	-webkit-flex-flow: row nowrap;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	height: 60px;
}
.nav-bluebeacon#navbar #nav-belt {
	background-color: #232f3e;
}
.layout2#navbar #nav-belt {
	background-color: #131921;
}
#navbar {
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 198;
	font-family: inherit;
	font-size: 12px;
	line-height: 1em;
	display: block;
	zoom: 1;
	min-width: 1000px;
}
.nav-flex#navbar {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
	-webkit-flex-flow: column nowrap;
	-ms-flex-flow: column nowrap;
	flex-flow: column nowrap;
	-webkit-box: 1;
	-moz-box: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.nav-bluebeacon#navbar {
	background-color: #232f3e;
}
html.a-js #navbar, html.a-no-js #navbar {
	margin: 0 !important;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}
header.nav-flex {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
}
body {
	font-size: 14px;
	line-height: 20px;
	font-family: Arial,sans-serif;
}
body {
	min-height: 100%;
}
body {
	padding: 0;
	margin: 0;
	background: #fff;
}
body {
	color: #0f1111;
}
body {
	margin: 0 8px !important;
}
html.a-js body, html.a-no-js body {
	margin: 0 !important;
}
html {
	font-size: 100%;
	-ms-text-size-adjust: 100%;
}
#nav-search .nav-searchbar {
	display: block;
	position: relative;
	height: 40px;
	margin-bottom: 0px;
	-webkit-border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
	border-radius: 0	;
}
.nav-flex#navbar #nav-belt #nav-search .nav-fill, .nav-flex#navbar #nav-belt #nav-search .nav-left, .nav-flex#navbar #nav-belt #nav-search .nav-right {
	height: auto;
}
.nav-bluebeacon#navbar #nav-search .nav-search-field {
	border: none;
	border-top: 1px solid transparent;
}
.nav-flex#navbar #nav-belt #nav-search .nav-searchbar, .nav-flex#navbar #nav-belt #nav-search .nav-searchbar .nav-fill, .nav-flex#navbar #nav-belt #nav-search .nav-searchbar .nav-search-field {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
	-webkit-box: 1;
	-moz-box: 1;
	-webkit-flex: 1 1 0px;
	-ms-flex: 1 1 0px;
	flex: 1 1 0px;
}
#nav-belt .nav-right, #navbar .nav-belt .nav-right {
	min-width: auto;
}
.nav-flex#navbar #nav-belt #nav-search .nav-left, .nav-flex#navbar #nav-belt #nav-search .nav-right {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
}
.nav-flex#navbar #nav-belt #nav-search .nav-searchbar .nav-right {
	min-width: auto;
}
#nav-search .nav-search-submit {
	position: relative;
	top: 5px;
	right: 0px;
	height: 40px;
	overflow: hidden;
	cursor: pointer;
	-webkit-border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0;
	border-radius: 0	;
	background-position: 0 -381px;
}
.nav-bluebeacon#navbar #nav-search .nav-search-submit {
	background-color: #febd69;
	background-image: none;
	border: none;
	width: 45px;
}
.nav-flex#navbar #nav-belt #nav-search .nav-searchbar .nav-search-submit {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
}
#nav-search .nav-search-submit #nav-search-submit-text {
	position: absolute;
	top: 10px;
	left: 12px;
	color: #111;
	text-shadow: none;
}
#nav-search .nav-search-submit .nav-sprite#nav-search-submit-text {
	background-position: -10px -290px;
	width: 21px;
	height: 21px;
	text-indent: -500px;
}
.nav-flex#navbar #nav-belt #nav-search .nav-searchbar .nav-search-submit .nav-sprite#nav-search-submit-text {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
	-webkit-box: 1;
	-moz-box: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: auto;
	height: auto;
	background-position: 2px -280px;
}
button, input, select, textarea {
	font-family: inherit;
}
button, input, select, textarea {
	margin: 0;
	font-size: 100%;
	vertical-align: middle;
}
button, input {
	line-height: normal;
}
#nav-search .nav-search-submit .nav-input {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	font-size: 14px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	outline: 0;
	color: #fff;
	background: 0 0;
	border: none;
	text-indent: -1000px;
	line-height: 1px;
}
#nav-search .nav-search-field .nav-input {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 100%;
	line-height: 15px;
	padding: 7px 10px 10px 0;
	margin: 0;
	border: 0;
	height: 38px;
	font-family: inherit;
	font-size: 15px;
	background: 0 0;
	color: #111;
	outline: 0;
	-webkit-appearance: none;
	box-shadow: none;
	text-indent: 8px;
	direction: ltr;
}
.nav-flex#navbar #nav-belt #nav-search .nav-searchbar .nav-input {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: static;
	float: none;
}
#nav-search .nav-search-field {
	position: relative;
	top: 5px;
	height: 40px;
	background: #fff;
}
#nav-search #nav-iss-attach {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	line-height: 1;
}
.a-input-text, input[type=text], input[type=search], input[type=number], input[type=tel], input[type=password], select.a-select-multiple, textarea {
	border: 1px solid #888C8C;
	border-radius: 3px;
	box-shadow: inset 0px 1px 2px rgba(15,17,17,0.15);
	outline: 0;
}
#nav-search .nav-search-scope {
	position: relative;
	top: 5px;
	float: left;
	height: 40px;
	margin: 0;
	padding-left: 5px;
	overflow: hidden;
	border: 1px solid #cdcdcd;
	-webkit-border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
	border-radius: 0	;
	background-position: 0 -532px;
}
.nav-bluebeacon#navbar #nav-search .nav-search-scope {
	background-color: #f3f3f3;
	background-image: none;
	border-left: 1px solid #f3f3f3;
	border-top: 1px solid #f3f3f3;
	border-bottom: 1px solid #f3f3f3;
}
.nav-flex#navbar #nav-belt #nav-search .nav-search-scope {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	float: none;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}
#nav-search .nav-search-facade {
	position: relative;
	float: left;
	cursor: default;
	overflow: hidden;
	top: 3px;
}
#nav-search .nav-search-dropdown {
	position: absolute;
	display: block;
	top: -1px;
	left: 0px;
	height: 35px;
	width: auto;
	font-family: inherit;
	outline: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	visibility: visible;
	border: 0;
	line-height: 35px;
}
#nav-search .nav-search-facade .nav-search-label {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #555;
	font-size: 12px;
	line-height: 33px;
	margin-right: 21px;
	margin-left: 5px;
	min-width: 19px;
}
em, i {
	font-style: italic;
}
#nav-search .nav-search-facade .nav-icon {
	position: absolute;
	top: 14px;
	right: 8px;
	border-style: solid;
	_border-style: dashed;
	border-width: 4px;
	border-color: transparent;
	border-top: 4px solid #666;
	border-bottom-width: 0px;
	width: 0px;
	height: 0px;
	font-size: 0px;
	line-height: 0;
}
</style>
</head>
<body class="a-m-us a-aui_72554-c a-aui_accordion_a11y_role_354025-c a-aui_btn_preorder_ks_359947-c a-aui_button_aria_label_markup_348458-t1 a-aui_csa_templates_buildin_ww_exp_337518-t1 a-aui_csa_templates_buildin_ww_launch_337517-c a-aui_csa_templates_declarative_ww_exp_337521-t1 a-aui_csa_templates_declarative_ww_launch_337520-c a-aui_dynamic_img_a11y_markup_345061-t1 a-aui_launch_cardui_a11y_fix_346896-t1 a-aui_launch_expander_ally_fix_354901-t1 a-aui_markup_disabled_link_btn_351411-t1 a-aui_pci_risk_banner_210084-c a-aui_popover_trigger_add_role_350993-t1 a-aui_preload_261698-c a-aui_rel_noreferrer_noopener_309527-c a-aui_template_weblab_cache_333406-c a-aui_tnr_v2_180836-c"><div id="a-page"><header class="nav-opt-sprite nav-flex nav-locale-us nav-lang-en nav-ssl nav-unrec nav-progressive-attribute" id="navbar-main"><div class="nav-sprite-v1 celwidget nav-bluebeacon nav-a11y-t1 bold-focus-hover layout2 nav-flex layout3 layout3-alt nav-packard-glow hamburger nav-progressive-attribute using-mouse" id="navbar" role="navigation" cel_widget_id="Navigation-desktop-navbar" data-cel-widget="Navigation-desktop-navbar"><div id="nav-belt"><div class="nav-fill"><div id="nav-search">
  <div id="nav-bar-left"></div>
  <form name="site-search" class="nav-searchbar nav-progressive-attribute" id="nav-search-bar-form" role="search" action="/s/ref=nb_sb_noss" method="GET" accept-charset="utf-8">

<div class="nav-left">
      <div id="nav-search-dropdown-card">
        
  <div class="nav-search-scope nav-sprite">
    <div class="nav-search-facade" data-value="search-alias=aps">
      <span class="nav-search-label nav-progressive-content" id="nav-search-label-id" style="width: auto;">All</span>
      <i class="nav-icon"></i>
    </div>
    <span class="nav-progressive-attribute" id="searchDropdownDescription" style="display: none;">Select the department you want to search in</span>
    <select name="url" tabindex="0" title="Search in" class="nav-search-dropdown searchSelect nav-progressive-attrubute nav-progressive-search-dropdown" id="searchDropdownBox" aria-describedby="searchDropdownDescription" style="top: 2.5px; display: block;" data-nav-selected="0" data-nav-digest="Xa0GQ+pPQ/tdsV+GmRWeXB8PUD0=">
        <option selected="selected" value="search-alias=aps">All Departments</option>
        <option value="search-alias=arts-crafts-intl-ship">Arts & Crafts</option>
        <option value="search-alias=automotive-intl-ship">Automotive</option>
        <option value="search-alias=baby-products-intl-ship">Baby</option>
        <option value="search-alias=beauty-intl-ship">Beauty & Personal Care</option>
        <option value="search-alias=stripbooks-intl-ship">Books</option>
        <option value="search-alias=computers-intl-ship">Computers</option>
        <option value="search-alias=digital-music">Digital Music</option>
        <option value="search-alias=electronics-intl-ship">Electronics</option>
        <option value="search-alias=digital-text">Kindle Store</option>
        <option value="search-alias=instant-video">Prime Video</option>
        <option value="search-alias=fashion-womens-intl-ship">Women's Fashion</option>
        <option value="search-alias=fashion-mens-intl-ship">Men's Fashion</option>
        <option value="search-alias=fashion-girls-intl-ship">Girls' Fashion</option>
        <option value="search-alias=fashion-boys-intl-ship">Boys' Fashion</option>
        <option value="search-alias=deals-intl-ship">Deals</option>
        <option value="search-alias=hpc-intl-ship">Health & Household</option>
        <option value="search-alias=kitchen-intl-ship">Home & Kitchen</option>
        <option value="search-alias=industrial-intl-ship">Industrial & Scientific</option>
        <option value="search-alias=luggage-intl-ship">Luggage</option>
        <option value="search-alias=movies-tv-intl-ship">Movies & TV</option>
        <option value="search-alias=music-intl-ship">Music, CDs & Vinyl</option>
        <option value="search-alias=pets-intl-ship">Pet Supplies</option>
        <option value="search-alias=software-intl-ship">Software</option>
        <option value="search-alias=sporting-intl-ship">Sports & Outdoors</option>
        <option value="search-alias=tools-intl-ship">Tools & Home Improvement</option>
        <option value="search-alias=toys-and-games-intl-ship">Toys & Games</option>
        <option value="search-alias=videogames-intl-ship">Video Games</option>
    </select>
  </div>

</div>
    </div>
    <div class="nav-fill">
      <div class="nav-search-field ">
        <input name="field-keywords" tabindex="0" class="nav-input nav-progressive-attribute" id="twotabsearchtextbox" dir="auto" aria-label="Search" type="text" placeholder="" value="" autocomplete="off">
      </div>
      <div id="nav-iss-attach"></div>
    </div>
    <div class="nav-right">
      <div class="nav-search-submit nav-sprite">
        <span class="nav-search-submit-text nav-sprite nav-progressive-attribute" id="nav-search-submit-text" aria-label="Go">
          <input tabindex="0" class="nav-input nav-progressive-attribute" id="nav-search-submit-button" type="submit" value="Go">
        </span>
      </div>
    </div>
  </form>
</div></div></div></div></header></div></body>
</html>

https://www.amazon.com/

Anonymous

Amazon Searchbar or Searchbox Css/html style 08.09.21

Information Epoch 1701297149