I would like to apply this css on my .FileUpload button , but It only works on IE and not on Chrome and I still don't know what is wrong with it. Someone as got an idea ?
Thanks for helping
.FileUpload
{
width: 90px;
float: left;
color: black;
font-family: Segoe UI,Arial, Sans-Serif;
border: 1px solid #C7D2D8;
height: 30px;
text-decoration: none;
display: inline;
background: white;
margin: 10px 10px 10px 540px;
text-align: center;
padding: 4px 0;
letter-spacing: -1;
border: none;
cursor: pointer;
}
AFAIK it is not possible to style an <input type="file">, for all browsers. But you could replace the upload-field with javascript and the replacement can by styled as much as you want.
You'll get an example of such a replacement script in this blog entry.
You can try using jquery instead, this would be cross browser compatable then, more info here > http://jqueryui.com/demos/button/#default
either that or there are several examples here on different methods of achieving what you want http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/
Related
I am trying to replicate this custom checkbox codepenhttps://codepen.io/zFunx/pen/dWbevd?editors=0100
But for the rest of my project i use bootstrap4 and it overwrites my costom checkbox somehow.
Here is my test My testhttps://codepen.io/GitMorin/pen/aEXrJq
As you can see I have added a .myCheckbox class to the input compare to the working example. I got a bit stuck of how I can overwrite bootstrap to the cosutm checkboxes.
Does anyone have any advice? Much appreciated
Try to replace the following CSS. This might be your correct answer. This is behaving differently from other because of font-family and some other CSS related things.
input.myCheckbox[type=checkbox] + label:before {
content: "\2714";
border: 0.1em solid #000;
border-radius: 0.2em;
display: inline-block;
width: 1.5em;
height: 1.5em;
padding-left: 0;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
I am just starting to use SlickGrid and amazed by its quality. However, when it comes to styling, I did not find any docs or examples recommending an overall styling approach. There are options and APIs scattered in various places, but it's very difficult to extract a strategy out of those. Also the grid leverages jQuery UI themes. Unfortunately those are interfering with what I am trying to achieve. We have picked up jQuery UI only for the calendar widget along with the ui-darkness theme. This theme works perfectly fine for the calendar widget, but the grid needs to override every aspect of it.
Here's a jsFiddle that shows the look I am trying to achieve: http://jsfiddle.net/nareshbhatia/3q6RD/. Just for illustration, it uses a regular HTML table. However I would like to achieve the exact same styling using SlickGrid. The CSS in this jsFiddle is essentially the requirement I have from my visual designer, e.g.
#positions-table th {
background-color: #505050;
color: #eeeeee;
text-shadow: none;
font-size: 13px;
height: 40px;
line-height: 40px;
}
Edit: I also created a jsFiddle with a starter SlickGrid implementation: http://jsfiddle.net/nareshbhatia/vJshY/. As you can see, the ui-darkness theme has completely taken over!
Within your second/last jsFiddle you can modify the CSS to have this code
.slick-header-column.ui-state-default {
background:none ;
background-color: #505050 ;
color: #eeeeee;
border: none;
padding: 0;
text-shadow: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
height: 40px;
line-height: 40px;
}
.slick-row.ui-widget-content, .slick-cell {
background: none;
background-color: #eeeeee;
color: #666666;
border: none;
border-bottom: solid 1px #ffffff;
font-size: 14px;
height: 60px;
line-height: 60px;
padding: 0 5px;
}
This is my site:
http://www.michelepierri.it/
I correctly see my theme in FF and IE but if I open it in Chrome menu voice are not correctly visualized:
Can you help me to resolve this problem?
After reviewing your css, I found too many unused styling please remove those and use these rules:
.menu li {
float: left;
}
.menu a {
white-space: nowrap;
border-left: 1px solid #585858;
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
padding: 0 0.9em;
text-shadow: 0 1px 1px #242424;
}
Please see the attachment after doing that changes.
See I am also using the same version and for me its fine
Prevent menu options from wrapping text
Add an additional style rule to your menu links CSS so all text stays in the same line.
.menu a {
border-left: 1px solid #585858;
color: #fff;
display: block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 0.9em;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px #242424;
white-space: nowrap; /* THIS ONE */
}
And add the same thing to .sub-header-menu a style definition because when I check the site even Cloud Computing is wrapped and breaks the whole situation.
Advice: It is ok that you're exploring the possibilities of CSS but you're playing a bit too much with it producing legibility problems. Letter and word spacing should only be cautiously manipulated. I'd suggest to remove majority of letter and word spacing settings.
good morning all!
i'm struggling at the present time to style a drop down select menu that will fit into my current design for mobile devices (i.e. especially the iPhone right now)
this is how it looks like at present time on my iPod
this is how it looks at present on Google Chrome
i would really like for the iPod select drop down to mirror the desktop drop down if possible as demonstrated with the textfields but i seem to be stuck at a hard point.
please find the current css code i am using below:
/************************************************************************
FORM STYLING
*************************************************************************/
button.button{
font-size: 14px;
font-weight: bold;
background-color: #333;
width: 95%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 10px;
text-align: center;
color: #CCC;
border: none;
}
input, textarea{
font-family:Helvetica,Arial,sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color:#555555;
background:#FBFBFB none repeat scroll 0 0;
border:1px solid #E5E5E5;
font-size:12px;
line-height: 16px;
margin-bottom:16px;
margin-right:6px;
margin-top:2px;
padding:10px;
display: block;
width: 92%;
}
select {
font-family:Helvetica,Arial,sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color:#555555;
background:#FBFBFB none repeat scroll 0 0;
border:1px solid #E5E5E5;
font-size:12px;
line-height: 16px;
margin-bottom:16px;
margin-right:6px;
margin-top:2px;
padding:10px;
display: inline-block;
width: 30%;
}
label{
font-size: 12px;
font-weight: bold;
color:#5B5A5A;
display: block;
}
label span, .required {
color: #C00;
}
i would appreciate any help in resolving this css conundrum!
many thanks in advance
This article by 37 signals explains that you must employ a css reset of the webkit styles before your own css will take precedence. They provide excellent code examples.
http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)