I am trying to make the fonts of the "search here" bigger in a search plugin and i am failing.I am using the same plugin in two websites,in one it works fine and in the second it doesnt.The code i am using is
#ajaxsearchlite1 .probox .proinput input, div[id*="ajaxsearchlite"] .probox .proinput input {
font-weight: normal;
font-family: Open Sans;
color: rgb(255, 255, 255) !important;
font-size: 16px !important;
line-height: normal !important;
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
border: 0;
box-shadow: none;
height: 34px;
}
the website is www.superfruits.gr
can anyone help me?
What if you remove div[id*="ajaxsearchlite"] ?
Related
See the example snippet below of a text using two box-shadow: inset as underline.
It renders perfectly on Chrome, Firefox and Safari (recent versions).
But it looks like this on Edge (see the faded line leaking at the bottom of the underline):
QUESTION
Is there any way around this? Or should I just give Edge users what they deserve?
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
font-family: 'Proxima Nova';
color: rgb(60,128,124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
a.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
padding-bottom: 3px;
}
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
https://gs.statcounter.com/browser-market-share/all/europe/#monthly-201810-201910-bar
I reproduced the issue in Microsoft Edge(EdgeHTML). I think it might be due to the different performance of different browser's render engine. Besides, I found a similar issue report, you could also report this issue. The situation of another issue report is also similar.
You could try to avoid using two inset box-shadow in Microsoft Edge(EdgeHTML) and use the code below as a workaround:
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
font-family: 'Proxima Nova';
color: rgb(60, 128, 124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px 0 rgb(60, 128, 124);
padding-bottom: 1px;
}
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
I copied the style section of my HTML into an external CSS file and added a link to the new file. However the results were slightly different. Certain tags seem to now be ignored, and others work fine.
Chrome shows differences in the inheritance, but I cannot figure out why.
Here is a link to the offending html and CSS: http://jsfiddle.net/n36xot86/
<body>
<!-- Header Section -->
<div class="form-style-1">
<h1>The School Board of Sarasota County, Florida<span>Construction Services Department.</span></h1>
<h2> Building Permit Application</h2>
<!-- Permit Application Section -->
</div>
</body>
From CSS File:
<style type="text/css">
.form-style-1 {
margin: 10px auto;
max-width: 800px;
padding: 20px 12px 10px 20px;
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 h1 {
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
.form-style-1 h1 > span {
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
</style>
When I look at the pages in chrome, I can see that some tags see the ".format-style-1" style and others do not. Notice that the corners are not rounded. Here is screen shots:
http://imgur.com/cYd6DKP
We initially coded the styles embedded in the HTML and then later copied all of the styles from the HTML into a external CSS File. Unfortunately, when we cut the styles from the HTML, we included the HTML Tags: "style type="text/css"" and "/style" around the styles.
The result were confusing. Some of the style values worked, and others did not. Instead of just showing the page unformated it rendered some of the styles which led us to believe that the CSS file was working.
Once we removed the HTML tags from the CSS, it worked perfectly.
I noticed that the buttons on unfuddle.com use a layer of noise, i was just wondering what the purpose of this is, i can't visibly notice the difference, but perhaps this is some cross browser hack?
It seems silly to build such an awesome CSS3 button that uses no images only to still load a noise image anyway.
Here is their CSS that goes with the buttons in question, note the gnoise.png?cbv-1346878364
.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
background-color: #A5C416;
background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #90D900;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
background-color: #7EBD00;
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
background-color: #7EBD00;
border-color: #90D900;
}
gnoise.png goes on top of the background-color (along with the radial gradient) to add some visual complexity to an otherwise flat image. The effect is barely visible on a.gp_button, but you can see it if you zoom in on a screenshot using Photoshop, or use the eyedropper to compare pixel colors. The effect is more visible on the <footer> element, because of its darker background color.
By re-using one image on top of solid colors, they get a variety of colors while avoiding multiple HTTP requests which might slow down page loading.
It's just a guess, but the get parameter (?cbv=1346878364) could be used to ensure that, after an update to the image files, a new image file is actually pulled from the server instead of using a browser-cached version.
My guess is that it could have been there for browsers that don't support CSS3. However when I inspect the button in chrome it is overwritten by another image, which makes me believe that is not the case.
If it is not there for older browsers then chances are it is just a coding error. maybe they used it at some point and forgot to take it out.
But to answer your question. It isn't used for anything because it is been overwritten by this image. And if you are looking to replicate what they are doing then I would just remove it.
background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');
I've been trying to skin a select box with css to make a custom form. I've been able to successfully do with firefox but chrome and safari have some extra parts to it not allowing me to do it.
Set an appearence: none and you can do almost anything with it: https://jsfiddle.net/CUA9p/1475/
body {
background-color: #fef;
margin: 2em;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #103;
background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px);
border: 1px solid white;
border-radius: 2px;
box-shadow: 0 0 0 2px #103, 0 3px 0 2px #649;
color: white;
font-family: sans-serif;
font-style: italic;
margin: 2px;
outline: none;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
text-transform: lowercase;
width: 100px;
}
<select>
<option>Hello</option>
<option>World</option>
</select>
Also take a look at this: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/
Here's a great site that will keep all your form elements looking consistent. http://formalize.me/
i dnt think it is possible with css alone..cause select box is a control that is browser specific.. you will have to use javascript or jquery.
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
Here is my file input rendered in Chrome:
In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)
My default CSS for inputs is:
input{
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
color:White;
background-image:url(../images/buttonBG.png);
height:27px;
border:1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
text-shadow: 0px 1px 2px #000;
}
input:hover{
text-shadow: 0px 1px 2px #fff;
background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?
Also is there any way to specifically select file inputs? Like input.file (doesn't seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
Though i have never implemented it anywhere but while studying about the same i came across this url
http://pixelmatrixdesign.com/uniform/
This might help you out.
you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }
For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}