Matrix Search Box CSS for submit button

Squiz Matrix Support
1

Hi, I'm just wondering if there is a way to get a stylesheet to talk specifically to the submit button in a Matrix-defined Search Box.


Using #SearchBox input { blah blah } you can apply styles to the button AND the input text box, but I would like to be able to apply a style only to the submit button, which in this case is an image (for example, a border that appears upon hovering over the button).



My reading tells me that I would most likely require a class name for that button. Eg if the class name of the button was "submit" then I could get to it by using #SearchBox input.submit { blah blah }.



Does the submit button in the Matrix-defined Search Box have a class name? I've tried guessing at what it might be (if there is one) but have had no luck so far.



Thanks for your help,



Margaret

2

We use this code in our Parse file:

    
 
      
Search

           
          
            

              Search
              
                
                Advanced Search

            

          


The design area is pointed at a search page and generates this on the front-end:

    
 
        
Search

        
        

             Search
             
    	 	  
                Advanced Search

        

      


We target the button thus:

div#sw input.searchbutton{ rules; }

cheers,
Richard
3

I'm not 100% sure, but I think the class="" attributes for the box and submit buttons are only in beta versions. Can a dev confirm?

4

Crumbs, not again :slight_smile:


I shall have to stop posting answers till the dev version is more common!



!

5

I just had a look - it appears that the submit button doesn't have a class. The textfields, however, have the "sq-form-field" class applied.


As a workaround until 3.5, you might want to try the following:


    #SearchBox input {
       /* General properties that apply to both the textfields and the button, eg. */
       margin: 10px;
       
       /* _Submit-Button-specific_ properties next, eg. */
       color: #FF0000;
    }
    
    #Searchbox input.sq-form-field {
       /* Override any submit-button-specific properties from above that you don't want applied to the textfield, eg. */
       color: #000000;
    }
    
    /* End result: one black textfield, one red button. */


Hope that helps.
6

Excellent, thanks so much, it works beautifully. I'm sure it'll work more beautifully once the class for the button is available, but this will definitely do for now.


Thanks!



Margaret