Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Is it possible to change text on google button ?

hi, i find stylish not long ago and try some theme and code to find something i want , what i want is i'm looking to the code that would make me able to change the text of those 2 button " Search Google " and " i'm feeling lucky" or at least the 1st one " search Google " by an another sentence, i don't know how to code so if someone could write me the code i need for this if it's possible it would be much appreciated thanks.

Comments

  • Default Browser

    It seems you cannot change text of input button thru CSS means.
    But you can use simple userscript:

    // ==UserScript==
    // @name        GoogLuck
    // @include https://www.google.com/
    // @run-at document-end
    // @grant gm_none
    // ==/UserScript==
    var s=document.querySelector('#gsr .jsb center input[value^="G"]');
    if(s) s.value="google find";
    s=document.querySelector('#gsr .jsb center input[value^="I"]');
    if(s) s.value="i'm feeling happy"

  • hi , first thanks for replying me and take the time to look at my request , but i'm kinda noob for this , how should i apply it to the theme for stylish ? tried to copy/paste it but didn't work ^^; and where should i wrote the new sentence, i want to write ? sorry for my lack of knowledge in this hope you'll understand.
    1266 x 694 - 54K
  • Default Browser
    that was a script for Tampermonkey
  • CSS is made for changing the design.
    Changing text concerns the content, not the design.
    --> Use Greasemonkey / Tampermonkey / Violentmonkey
  • Default Browser
    Indeed you can change text content of html element using :before/:after suffix.
    But it is forbidden for input buttons, for some safety reasons, I think
  • Indeed you can change text content of html element using :before/:after suffix. But it is forbidden for input buttons, for some safety reasons, I think

    Not possible to use ::before/::after on input elements.
    But it is possible on < button >

    Also ::before/::after are called pseudo elements.

  • still me ^^; sry again so i got tampermonkey , i create a new script an import the code you wrote me, but how should i made it able to change the " Recherche google " (yea i'm using it on www.google.fr) into something like " hello ", tried to change the "google.com" and " google find "in the code to fit the name in the button and the address of the website i'm using, but it didn't work , what do i miss this time ?
  • It was tricky, but I did it in css.
    @-moz-document url-prefix("https://www.google.") {
    input[name="btnK"] {
    font-size: 0px!important;
    width: 123px; /* width for left button */
    }
    .jsb>center:before {
    content: "CLICK MEEE!"; /* text for left button */
    left: 108px; /* align text for left button */
    top: 5px;
    position: relative;
    font-weight: bold;
    color: #757575;
    }
    input[name="btnI"] {
    font-size: 0px!important;
    width: 144px; /* width for right button */
    }
    .jsb>center:after {
    content: "I'm Feeling Great"; /* text for right button */
    right: 128px; /* align text for right button */
    top: 5px;
    position: relative;
    font-weight: bold;
    color: #757575;
    }
    .jsb>center:hover:before,
    .jsb>center:hover:after {
    color: #222;
    }
    }
  • hi and thx pabli , i tried on the theme i'm making or even in a blank new theme but it doesn't seem to work for me u can see on the picture
    1920 x 661 - 62K
    1920 x 652 - 95K
  • Click Import on the left side and there put my code and overwrite style.

    trespassersW solution is better.
Sign In or Register to comment.