I get a dashed border when I select the select box in Firefox. How can I remove it? See the image.
http://jsfiddle.net/Ltcs9/
select.register {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
appearance: none;
font-size:14px;
display: inline-block;
height: 30px;
margin: 0;
padding: 5px 8px;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
select.register:focus{
outline: none;
border: 1px solid #ff00ff;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
Add the below to your CSS, it should fix it.
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
Demo Fiddle
Do something like this:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
You have to use this pseudo selector ::-moz-focus-inner because this border is Firefoxs "inner focus style".
(Code: http://snipplr.com/view/16931)
Related
Look at the edges. I been trying to fix this for two days now, throw at it everything everywhere. The problem is when the scrollbar appears this happens. Note it's the same when scrollbar is unstyled. What do you think?
Styled component code:
padding: 6px;
resize: none;
font-family: inherit;
font-size: inherit;
background-color: #e4e4e4;
color: black;
outline: none;
border: none;
&:focus {
outline: none;
border: none;
box-shadow: 0 0 0 2px #2d8cff;
background-color: ${Colors.primary};
}
& {
::-webkit-scrollbar {
width: 16px;
cursor: initial;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: inset 0 0 10px 10px #c1c1c1;
border: solid 4px transparent;
cursor: initial;
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 10px 10px #7d7d7d;
}
}
I fixed this using box-sizing: border-box and using border instead of boxshadow. In border then has to be specified in not focus state too, to the same color as background.
I am using AngularJS and I wonder if there are any features that can help me. I have the following button CSS:
button {
background-color: #button-background-color;
border: 1px solid #button-border;
background-color: #ccc;
border: 1px solid #999;
color: #button-color;
background: #e6e6e6;
background-image: -moz-linear-gradient(top,#fff,#d9d9d9);
background-image: -webkit-linear-gradient(top,#fff,#d9d9d9);
background-image: -o-linear-gradient(top,#fff,#d9d9d9);
background-image: -ms-linear-gradient(top,#fff,#d9d9d9);
background-image: linear-gradient(top,#fff,#d9d9d9);
border: 1px solid #ccc;
border-top-color: #ccc;
border-bottom-color: #a2a2a2;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
line-height: 18px;
line-height: 1.8rem;
font-size: 14px;
font-size: 1.4rem;
cursor: pointer;
color: #474747;
padding: 4px 10px 3px 10px;
font-family: arial,sans-serif;
vertical-align: middle;
}
This looks good but I would like to have an effect that appears when I hover over and click on a button without yet releasing the click.
Is there any way that I can catch this with angular and have the class changed for the period when I am holding down the button?
Please note that I am looking for a CSS only or a CSS/AngularJS solution. I am not using jQuery.
Thanks
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3schools.com/cssref/sel_active.asp
button:hover button:active
button {
background-color: #button-background-color;
border: 1px solid #button-border;
background-color: #ccc;
border: 1px solid #999;
color: #button-color;
background: #e6e6e6;
background-image: -moz-linear-gradient(top,#fff,#d9d9d9);
background-image: -webkit-linear-gradient(top,#fff,#d9d9d9);
background-image: -o-linear-gradient(top,#fff,#d9d9d9);
background-image: -ms-linear-gradient(top,#fff,#d9d9d9);
background-image: linear-gradient(top,#fff,#d9d9d9);
border: 1px solid #ccc;
border-top-color: #ccc;
border-bottom-color: #a2a2a2;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
line-height: 18px;
line-height: 1.8rem;
font-size: 14px;
font-size: 1.4rem;
cursor: pointer;
color: #474747;
padding: 4px 10px 3px 10px;
font-family: arial,sans-serif;
vertical-align: middle;
}
button:hover
{
background: red;
}
button:active
{
background: green;
}
<button>button</button>
you can put the following css:
button:active{
background-color: red;
}
for more information: http://www.w3schools.com/cssref/sel_active.asp
Any idea why my search box comes out all buggy looking like this:
Instead of like this:
Here is my HTML code:
<form class="searchform">
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="button" value="Go" />
</form>
CSS
#header {
background-color: #F1F1F1;
height: 50px;
border-bottom:1px solid #E1E1E1;
margin: 0px auto;
}
#header_content {
width: 980px;
margin: 0px auto;
padding-top: 8px;
}
#header_logo {
padding-right: 20px;
float:left;
}
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform, .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
Full demo at: http://jsfiddle.net/FBVL2/
.searchform is not wide enough.
.searchform {
width: 250px;
}
http://jsfiddle.net/FBVL2/3/
Reason has something to do with CSS box model.
You're setting the container to be the same size as the search field. This means there's no space for anything else. You need to have a the input be box padding + input margin + button margin + button width.
Set the #searchform to 250px wide, and the input to 200px wide.
demo
The search form input takes up the whole box, this came out what I'd call perfect.
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
width: 75%;
}
The problem is just this:
.searchform, .searchfield
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
Just remove .searchform
.searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
For me with this changes is working well.
I have set some styles on a content-editable div the div is resizable but the style doesn't get change according to the size when the size is changed.
HTML:
<div contenteditable="true" id="input"></div>
CSS:
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
height:40px;
resize:both;
}
Give width in percentage, that will help it resize. Dont know if thats what u mean.
http://jsfiddle.net/8xRZv/
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 80%;
height:40px;
resize:both;
}
I have the following css:
fieldset ul li input {
width: 96%;
margin: 0;
padding: 6px;
font-size: 13px;
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
-webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}
Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can't see it completely. As you can see is hidden in the half of it:
Either increase the height or the padding.
input {
padding: 10px;
}