8 Replies Latest reply on Apr 10, 2014 4:09 PM by Nancy OShea

    Apply CSS code to Google chrome only?

    hinc94 Level 1

      Not Safari, Internet Explorer, just Chrome. Anyone knows?

        • 1. Re: Apply CSS code to Google chrome only?
          Jon Fritz II Adobe Community Professional & MVP

          There are ways, yes, but they are generally a bit complex.

           

          What are you trying to do specifically, maybe there is a better way to do it than a Chrome only media query or javascript?

          • 2. Re: Apply CSS code to Google chrome only?
            Nancy OShea Adobe Community Professional & MVP

            Owing to the way some browsers (cough, IE) like to imitate other browser user agents, this is not usually a good idea.  Invariably, you'll end up catching some browsers you don't want.

             

            As Jon said, what exactly are you trying to do? 

             

             

            Nancy O.

            1 person found this helpful
            • 3. Re: Apply CSS code to Google chrome only?
              BenPleysier Adobe Community Professional & MVP

              You can use WhichBrowser to detect the browser type. To load the style sheet use JavaScript as in http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

              • 4. Re: Apply CSS code to Google chrome only?
                hinc94 Level 1

                I'm creating a searchbox, it looks good in Safari but looks difference in chrome.

                • 5. Re: Apply CSS code to Google chrome only?
                  hinc94 Level 1

                  Safari
                  Safari.png
                  Chrome
                  Chrome.png
                  Firefox
                  Firefox.png

                  • 6. Re: Apply CSS code to Google chrome only?
                    Nancy OShea Adobe Community Professional & MVP

                    You're trying to put a plug on something that is broken in more than one browser -- in this case FF & Chrome.

                     

                    Let's see your form (a link is preferred).

                     

                     

                    Nancy O.

                    • 7. Re: Apply CSS code to Google chrome only?
                      hinc94 Level 1

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                      <html xmlns="http://www.w3.org/1999/xhtml">

                      <head>

                                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                                <title></title>

                       

                       

                                <style type="text/css">

                                <!--

                                          html,

                                          body {

                                                    background-color: #FFF;

                                                    margin: 0px;

                                                    padding: 0px;

                                                    height: 100%;

                                                    font-family: Arial, Helvetica, sans-serif;

                                          }

                       

                                          #topbackground {

                                                    position:relative;

                                                    left:0px;

                                                    right:0px;

                                                    width:auto;

                                                    height:60px;

                                                    background-color:#EFEFEF;

                                                    z-index:0;

                                          }

                                                    #main {

                                                              text-align: center;

                                                              width: 100%;

                                                              margin-top: -60px;

                                                              margin-right: auto;

                                                              min-height: 100%;

                                                              margin-left: auto;

                                                              position: relative;

                                                    }

                       

                                                    #center {

                                                              width: 960px;

                                                              margin:0 auto;

                                                    }

                       

                                                              #heading {

                                                                        position: relative;

                                                                        left: 0px;

                                                                        right: 0px;

                                                                        width: auto;

                                                                        height: 60px;

                                                                        z-index: 1;

                                                                        color: #000000;

                                                                        font-size: 24px;

                                                                        font-family: Arial;

                                                                        letter-spacing: -2px;

                                                                        text-decoration: none;

                                                                        background-color: #EFEFEF;

                                                              }

                       

                                                                        #heading a:visited,

                                                                        #heading a:link {

                                                                                  color: #000000;

                                                                                  text-decoration: none;

                                                                        }

                       

                                                                        #heading #logo {

                                                                                  position:relative;

                                                                                  margin-left:16px;

                                                                                  margin-right:32px;

                                                                                  vertical-align:-8px;

                                                                                  margin-top:10px;

                                                                        }

                       

                                                                        #heading #searchbox {

                                                                                  position:relative;

                                                                                  width: 160px;

                                                                                  height: 22px;

                                                                                  z-index: 1;

                                                                                  margin-left: 18px;

                                                                                  font-family: Arial;

                                                                                  border: solid 1px #999;

                                                                                  border-top-left-radius: 5px;

                                                                                  border-bottom-left-radius: 5px;

                                                                                  border-right: 0px;

                                                                                  vertical-align: 4px;

                                                                                  margin-left: 20px;

                                                                        }

                       

                                                                        textarea:focus, #searchbox:focus,

                                                                        #email:focus,

                                                                        #password:focus {

                                                                                  outline: 0;

                                                                        }

                       

                       

                                                                        #heading #searchbutton {

                                                                                  position:relative;

                                                                                  z-index:2;

                                                                                  margin-left:-4px;

                                                                                  vertical-align:-5px;

                                                                                  width:16px;

                                                                                  height:16px;

                                                                                  background-color:#FFFFFF;

                                                                                  border:solid 1px #999;

                                                                                  border-top-right-radius:5px;

                                                                                  border-bottom-right-radius:5px;

                                                                                  border-left:0px;

                                                                                  border-width:1px;

                                                                                  border-height:1px;

                                                                                  padding-top:4px;

                                                                                  padding-bottom:4px;

                                                                                  padding-right:6px;

                                                                                  padding-left:6px;

                                                                        }

                       

                       

                                -->

                                </style>

                      </head>

                      <body>

                                <div id="topbackground"></div>

                                          <div id="main">

                              <div id="center">

                                                    <div id="heading" align="left">HEADER

                                            

                                                                <input type="text" class="textbox"" id="searchbox" value="" size="20" maxlength="60""s />

                                                              <a href=".htm"><img src="Images/Button/Search.png" width="18" height="18" alt="" id="searchbutton"/></a>

                                                     

                       

                       

                                 </div>

                                  </div>

                       

                      </body>

                      </html>

                      • 8. Re: Apply CSS code to Google chrome only?
                        Nancy OShea Adobe Community Professional & MVP

                        Try this in a new, blank document.  There is some slight browser variation (expected) but this looks basically the same in FF, Chrome & IE.

                         

                         

                        <!doctype html>
                        <html>
                        <head>
                        <meta charset="utf-8">
                        <title>Search Form</title>
                        
                        <style>
                        /**SEARCH FORM**/
                        form#search {
                        width:350px;
                        border:3px solid #849ab2;
                        padding: 10px 0 10px 0;
                        /**ROUNDED BORDERS**/
                        border-radius:5px;
                        margin-left: 25px;
                        }
                        
                        #searchField {
                        width: 230px;
                        height: 35px; /**image height plus a tad more**/
                        background:#FFF url(http://alt-web.com/Images/search.png) right bottom no-repeat;
                        font-size:14px;
                        color:#999;
                        margin-left: 12px;
                        padding: 2px;
                        /**ROUNDED BORDERS**/
                        border-radius:8px;
                        border:none;
                        box-shadow: inset 0px 0px 4px #999;
                        }
                        #searchField:focus {box-shadow: inset -1px 0px 8px #3399FF;}
                        
                        #search-button {
                        background-color:#da5e2a;
                        color:#fff;
                        font:bold 18px Arial, Helvetica, sans-serif;
                        border:1px outset red;
                        cursor:pointer;
                        /**ROUNDED BORDERS**/
                        border-radius:5px;
                        margin: 5px 12px;
                        }
                        #search-button:focus, 
                        #search-button:hover {
                        background-color:#990000;
                        border: 1px inset red;
                        }
                        /**END SEARCH FORM**/
                        
                        </style>
                        
                        </head>
                        
                        <body>
                        <!--Site Search -->
                        <form id="search" action="script.php"
                        method="get">     
                        <input type="text" name="query" id="searchField" placeholder="Search this site" />
                        <input type="submit" id="search-button" value="FIND" />
                        </form>
                        <!--End Site Search --> 
                        </body>
                        </html>
                        

                         

                         

                        Nancy O.

                        1 person found this helpful