/* a { color: #69C; text-decoration: none; } a:hover { color: #F60; } h1 { font: 1.7em; line-height: 110%; color: #000; } p { margin: 0 0 20px; } input { outline: none; } */ #tomeasureSearchInput,#relevantSearchInput { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; } #tomeasureSearchInput,#relevantSearchInput{ background: url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; /* border: solid 1px #ccc; */ padding: 9px 7px 9px 32px; width:0; height: 6px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius:3px; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; margin-left: 18ch ; margin-top: 6px; border: none; right: 0; } #relevantSearchInput{ margin-left: 172px; } #tomeasureSearchInput:focus , #relevantSearchInput:focus { width: 160px; background-color: #fff; border-color: #1b1d1c; box-shadow: 0 0 5px rgba(109, 207, 246, .5); } #relevantSearchInput:focus { width:165px; } .input-containerSearchPaste { position: relative; display: inline-block; } /* Clipboard icon - initially hidden */ .clipboard-icon ,.searchfocusx{ position: absolute; top: 10px; right: 20px; color: #555; font-size: 16px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .searchfocusx{ right:4px; } #tomeasureSearchInput:focus ~ .clipboard-icon, #tomeasureSearchInput:focus ~ .searchfocusx, #relevantSearchInput:focus ~ .clipboard-icon, #relevantSearchInput:focus ~ .searchfocusx { opacity: 1; pointer-events: auto; }