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/
Related
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"] ?
I have used div event which appear with scrollbar on the page to show content.
Though I have adjusted the width of div, When it appears on the page; it reaches to right corner of the screen.
code:
<div id="txtHint" align="justify" style="z-index: 1; color:green; left: 350px; top: 270px; position: absolute; margin-top: 0px; width:500px;height:250px;overflow:auto;">
Height gets adjusted correctly, for width whatever I take i.e. 200,300, or 800px. It spans up right end.
I checked in mozilla and chrome both. I am testing it for my ec2 amazon instance.
Similarly my css button :
<input class="uibutton confirm large" type="submit" value="Connect with facebook" onclick="AjaxResponse()" >
When I click it, all actions performed correctly but it does not show any effect so that user can realize whether button is clicked or not.
Can someone tell me effect which can be realized on click event. I tried on google with css button click effect and tested someof them. But does not make any difference.
Here is css for this:
.uibutton,
.uibutton:visited {
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.5em 0.8em 0.5em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 13px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1;
*display: inline;
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 2.0px;
border: 0;
}
.uibutton.large {
font-size: 16px;
}
/* ............................................................................................................. Submit, etc */
.uibutton.confirm {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Sounds a lot like you need css click events. This can be achieved with a simple checkbox.
Here is a link demonstrating it:
http://tympanus.net/Tutorials/CSSClickEvents/index.html
http://jsfiddle.net/Hive7/gd7AJ/
Edit
To do the current element you give the class of css effect to the current element
Edit
Also if you want to make the clicked element change you need to put the checkbox before
Here is a fiddle demo of both:
http://jsfiddle.net/Hive7/gd7AJ/1/
I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.
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');
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;
}