The name for blue X button



  • guys anyone knows the name of the blue x in the inspector? cant find it...

    0_1507124916008_file.gif



  • @johnnyfire Is that the close button on the find in page bar? I think that's button.fip-close. It also has rules for its hover state.



  • @lonm said in The name X:

    @johnnyfire Is that the close button on the find in page bar? I think that's button.fip-close. It also has rules for its hover state.

    button.fip-previous,
    button.fip-next,
    button.fip-close {
    background-color: black;
    background-image: none !important;
    border-top: 0px solid {display:none !important;}
    border-bottom: 0px solid {display:none !important;}
    border: none;
    box-shadow: none !important;
    }
    .fip-close {display:none !important;}

    my code so far but this hover button cant hide... any advice my friend?


  • Moderator

    @johnnyfire said in The name X:

    button.fip-previous,
    button.fip-next,
    button.fip-close {
    background-color: black;
    background-image: none !important;
    border-top: 0px solid {display:none !important;}
    border-bottom: 0px solid {display:none !important;}
    border: none;
    box-shadow: none !important;
    }
    .fip-close {display:none !important;}

    Would be more correct (untested):

    button.fip-previous,
    button.fip-next,
    button.fip-close { display:none !important; }
    .fip-close {display:none !important;}
    


  • @gwen-dragon said in The name X:

    @johnnyfire said in The name X:

    button.fip-previous,
    button.fip-next,
    button.fip-close {
    background-color: black;
    background-image: none !important;
    border-top: 0px solid {display:none !important;}
    border-bottom: 0px solid {display:none !important;}
    border: none;
    box-shadow: none !important;
    }
    .fip-close {display:none !important;}

    Would be more correct (untested):

    button.fip-previous,
    button.fip-next,
    button.fip-close { display:none !important; }
    .fip-close {display:none !important;}
    

    on a syntax way yes! but the result its the same :(



  • @johnnyfire if its possible will be apriciate a help its the only thing that remains and pisses me off ;)



  • @johnnyfire I've tried using just

    button.fip-previous,
    button.fip-next,
    button.fip-close { display:none !important }
    

    And for me that hides the buttons as expected. I'm not sure why that wouldn't be happening for you. Have you accidentally overridden this using a rule in later css or is this the final rule you've added?



  • @lonm said in The name for blue X button:

    @johnnyfire I've tried using just

    button.fip-previous,
    button.fip-next,
    button.fip-close { display:none !important }
    

    And for me that hides the buttons as expected. I'm not sure why that wouldn't be happening for you. Have you accidentally overridden this using a rule in later css or is this the final rule you've added?

    i dont want the button the button i already hide em from the first time...i wanna hide the blue x hover button that clear the find in page text



  • @johnnyfire Apologies, I misunderstood. Currently, the Find In Page input uses a "search" input type. By default, chromium (maybe webkit?) will display that with a cancel button, and I don't think this has anything to do with vivaldi. You can get rid of it by using

    #fip-input-text::-webkit-search-cancel-button {
      -webkit-appearance: none !important
    }
    


  • @lonm said in The name for blue X button:

    @johnnyfire Apologies, I misunderstood. Currently, the Find In Page input uses a "search" input type. By default, chromium (maybe webkit?) will display that with a cancel button, and I don't think this has anything to do with vivaldi. You can get rid of it by using

    #fip-input-text::-webkit-search-cancel-button {
      -webkit-appearance: none !important
    }
    

    Apologies accepted! and you rock! works like a charm at last a browzer in my image! you help is more than greatfull!


  • Moderator

    @lonm Oh, sorry. Saw this too late.
    I misunderstood too which x button was really meant.



  • @gwen-dragon said in The name for blue X button:

    @lonm Oh, sorry. Saw this too late.
    I misunderstood too which x button was really meant.

    no worries! maybe it was me that i didnt explain right! that matters is that i have the best mates! and im so so so greatfull!



  • A slightly different but related question: if instead of removing the button entirely I wanted to change its color from blue to say orange, what would be the css?



  • @narsis I actually have no idea. The implementation is totally non-standard. The two easiest ways would be to: Either make an image, and set the following:

    #fip-input-text::-webkit-search-cancel-button {
      -webkit-appearance: none !important;
    height: 10px;
    width: 10px;
    background-image: url(base64 encoded image image here)
    }
    

    OR to use a filter, which will only work as long as the x is blue:

    #fip-input-text::-webkit-search-cancel-button {
      filter: hue-rotate(180deg) saturate(2);
    }
    

    I actually have no idea how this element is styled internally, so don't know the proper way to override it.



  • @lonm The filter worked after a bit of tweaking to get the color right. Thanks!


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.