I am trying to make Google's homepage more to my liking. I have added the following CSS:
* {
/* zoom: */
/* font-size: 103% ; */
min-width: 0px !important ;
}
input {
width: 1000px !important ;
}
#top_nav > * {
/* font-size: 2em !important;; */
zoom: 200% ;
}
.logo {
/* display: none; */
}
#top_nav > * > * > * > * > * {
margin-left: 0px !important;
margin-right: 10px !important;
}
#center_col {
margin-left: 3em !important;
width: 90vw ;
}
.g , cite, #res h3 {
width: 100% !important;
overflow-wrap: anywhere !important;
white-space: wrap !important;
overflow: hidden !important ;
max-width: none !important;
margin-right: 0px !important;
font-size: 1.4em !important;
word-break: break-word;
}
div {
max-width: none !important;
}
But I can't find a good, maintainable way to select the search box for CSS alterations. I want to add a zoom: 2 to it, and make its width fill the empty space after it.
BTW, is there any better selector than #top_nav > * > * > * > * > * available for the top navigation menu bar? I tried using !important but it was overridden by Google's own CSS.
Here is the HTML that contains the search box:
<div
class="CvDJxb big"
jscontroller="ZyRBae"
jsaction="rcuQ6b:npT2md"
id="searchform"
>
<div id="_zdijYK-pCI3QUv3GpYAD5">
<span class="gb" style="display: none"></span>
<div class="gb_qa gb_0d gb_Wa gb_Ic" id="gb">
<div class="gb_Xd gb_Ta gb_Jd" data-ogsr-up="">
<div class="gb_Te">
<div class="gb_Oc">
<div
class="gb_C gb_cd gb_i gb_Bf"
data-ogsr-fb="true"
data-ogsr-alt=""
id="gbwa"
>
<div class="gb_Af">
<a
class="gb_D"
aria-label="Google apps"
href="https://www.google.co.uk/intl/en/about/products?tab=wh"
aria-expanded="false"
role="button"
tabindex="0"
><svg class="gb_We" focusable="false" viewBox="0 0 24 24">
<path
d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"
></path></svg
></a>
</div>
</div>
</div>
<a
class="gb_4 gb_5 gb_ae gb_4c"
href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/search%3Fq%3Dharry%26rlz%3D1C5CHFA_enIR733IR733%26oq%3Dharry%26aqs%3Dchrome..69i57j69i60j69i65l3j69i60l3.1174j0j1%26sourceid%3Dchrome%26ie%3DUTF-8&ec=GAZAAQ"
target="_top"
>Sign in</a
>
</div>
<div
style="
overflow: hidden;
position: absolute;
top: 0px;
visibility: hidden;
width: 328px;
z-index: 991;
height: 0px;
margin-top: 57px;
transition: height 0.3s ease-in-out 0s;
right: 0px;
margin-right: 4px;
"
></div>
</div>
</div>
</div>
<div class="sfbg" style="margin-top: -20px"><div class="sfbgg"></div></div>
<form
class="tsf"
action="/search"
id="tsf"
data-submitfalse="q"
method="GET"
name="f"
role="search"
>
<div jsmodel="vWNDde" jsdata="MuIEvd;_;Ac21RE">
<div
jscontroller="W5mjOc"
jsmodel="QubRsd"
class="A8SBwf"
jsdata="LVplcb;_;"
jsaction="lX6RWd:w3Wsmc;DkpM0b:d3sQLd;IQOavd:dFyQEf;XzZZPe:jI3wzf;Aghsf:AVsnlb;iHd9U:Q7Cnrc;f5hEHe:G0jgYd;vmxUb:j3bJnb;R2c5O:LuRugf;qiCkJd:ANdidc;NOg9L:HLgh3;uGoIkd:epUokb;zLdLw:eaGBS;rcuQ6b:npT2md"
>
<div class="logo">
<a
href="https://www.google.com/webhp?hl=en&sa=X&ved=0ahUKEwjvw4DXwdPwAhUNqBQKHX1jCTAQPAgS"
title="Go to Google Home"
id="logo"
data-hveid="18"
><img
src="/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"
alt="Google"
height="30"
width="92"
data-atf="1"
/></a>
</div>
<div class="RNNXgb" jsname="RNNXgb">
<div class="SDkEP">
<div class="iblpc" jsname="uFMOof">
<div class="CcAdNb">
<span class="QCzoEc z1asCe MZy1Rb"
><svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path></svg
></span>
</div>
</div>
<div
jscontroller="JGHKP"
class="a4bIc"
jsname="gLFyf"
jsaction="h5M12e;input:d3sQLd;blur:jI3wzf"
>
<div class="pR49Ae gsfi" jsname="vdLsw"></div>
<div
jsname="aJyGR"
jscontroller="DdCRH"
class="gLFyf uKLqed gsfi"
data-promo-open-duration="2000"
jsaction="rcuQ6b:npT2md"
>
<g-snackbar
jsname="nH91he"
jscontroller="TrMQ4c"
style="display: none"
data-dismiss=""
jsshadow=""
jsaction="rcuQ6b:npT2md"
id="ow10"
__is_owner="true"
><div
jsname="Ng57nc"
class="CIKhFd"
data-ved="0ahUKEwjvw4DXwdPwAhUNqBQKHX1jCTAQ4G8IFA"
jsowner="ow10"
>
<div class="EA3l1b">
<div class="Xb004" jsslot="">
<span class="awHmMb xy0YY ohEFXb"
>Press <span class="gLWQQ">/</span> to jump to the
search box</span
>
</div>
</div>
</div></g-snackbar
>
</div>
<input
class="gLFyf gsfi"
jsaction="paste:puy29d; mouseenter:MJEKMe; mouseleave:iFHZnf;"
maxlength="2048"
name="q"
type="text"
aria-autocomplete="both"
aria-haspopup="false"
autocapitalize="off"
autocomplete="off"
autocorrect="off"
role="combobox"
spellcheck="false"
value="harry"
aria-label="Search"
data-ved="0ahUKEwjvw4DXwdPwAhUNqBQKHX1jCTAQ39UDCBU"
/>
</div>
<div class="dRYYxd">
<div
jscontroller="PymCCe"
class="BKRPef M2vV3"
jsname="RP0xob"
aria-label="Clear"
role="button"
jsaction="AVsnlb;rcuQ6b:npT2md"
data-ved="0ahUKEwjvw4DXwdPwAhUNqBQKHX1jCTAQ05YFCBY"
>
<span
class="ExCKkf z1asCe rzyADb"
jsname="itVqKe"
role="button"
tabindex="0"
aria-label="Clear"
><svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
></path></svg
></span>
<span class="ACRAdd"></span>
</div>
<div
jscontroller="iBsgfb"
class="hpuQDe"
aria-label="Search by voice"
role="button"
tabindex="0"
jsaction="h5M12e;rcuQ6b:npT2md"
data-ved="0ahUKEwjvw4DXwdPwAhUNqBQKHX1jCTAQvs8DCBc"
>
<svg
class="HPVvwb"
focusable="false"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#4285f4"
d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"
></path>
<path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
<path
fill="#fbbc05"
d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"
></path>
<path
fill="#ea4335"
d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"
></path>
</svg>
</div>
</div>
</div>
<button
class="Tg7LZd"
jsname="Tg7LZd"
aria-label="Google Search"
type="submit"
data-ved="0ahUKEwjvw4DXwdPwAhUNqBQKHX1jCTAQ4dUDCBg"
>
<div class="FAuhyb">
<span class="z1asCe MZy1Rb"
><svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path></svg
></span>
</div>
</button>
</div>
<div
jscontroller="J7ZZy"
class="UUbT9"
style="display: none"
jsname="UUbT9"
jsaction="mouseout:ItzDCd;mouseleave:MWfikb;hBEIVb:nUZ9le;YMFC3:VKssTb"
>
<div class="RjPuVb" jsname="RjPuVb"></div>
<div class="aajZCb" jsname="aajZCb">
<div class="xtSCL"></div>
<ul class="erkvQe" jsname="erkvQe" role="listbox"></ul>
<li class="ynRric V88cHc" id="ynRric" role="presentation"></li>
<li data-view-type="1" class="sbct" id="YMXe" role="presentation">
<div class="eIPGRd">
<div class="sbic"></div>
<div class="pcTkSc" role="option">
<div class="wM6W7d"><span></span></div>
<div class="ClJ9Yb"><span></span></div>
</div>
<div class="AQZ9Vd"><div class="sbai">Remove</div></div>
</div>
</li>
<li
class="IDVnvc"
data-view-type="6"
id="TN4rFf"
role="presentation"
>
<div class="cRV9hb">
<div class="aVbWac"><div class="sbic"></div></div>
<div class="pcTkSc" role="option">
<div class="wM6W7d"><span></span></div>
<div class="ClJ9Yb"><span></span></div>
</div>
</div>
</li>
</div>
<div
jsname="JUypV"
jscontroller="N9swdb"
class="JUypV"
data-async-context="async_id:duf3-46;authority:0;card_id:;entry_point:0;feature_id:;ftoe:0;header:0;is_jobs_spam_form:0;open:0;preselect_answer_index:-1;suggestions:;suggestions_subtypes:;suggestions_types:;surface:0;title:;type:46"
>
<div
jscontroller="xz7cCd"
style="display: none"
jsaction="rcuQ6b:npT2md"
></div>
<div
id="duf3-46"
data-jiis="up"
data-async-type="duffy3"
data-async-context-required="type,open,feature_id,async_id,entry_point,authority,card_id,ftoe,title,header,suggestions,surface,suggestions_types,suggestions_subtypes,preselect_answer_index,is_jobs_spam_form"
class="yp"
data-ved="0ahUKEwjvw4DXwdPwAhUNqBQKHX1jCTAQ-0EIGQ"
></div>
<a
class="oBa0Fe wrSo4 aciXEb"
href="#"
id="sbfblt"
data-async-trigger="duf3-46"
role="button"
jsaction="trigger.szjOR"
data-ved="0ahUKEwjvw4DXwdPwAhUNqBQKHX1jCTAQtw8IGg"
>Report inappropriate predictions</a
>
</div>
</div>
</div>
<div
style="
background: url(/images/searchbox/desktop_searchbox_sprites318_hr.webp);
"
></div>
</div>
<div id="tophf">
<input name="rlz" value="1C5CHFA_enIR733IR733" type="hidden" /><input
value="zdijYK-pCI3QUv3GpYAD"
name="ei"
type="hidden"
/><input
value="AINFCbYAAAAAYKPm3dz25dXXhAXsXs7W_at7vVHXOtaw"
disabled="true"
name="iflsig"
type="hidden"
/>
</div>
</form>
</div>
A little poking around in the Web Inspector gave me the search box is
.RNNXgband the top nav is.GLcBOb.