I have researched the question, and from what I gathered, you can use -webkit-appearance: none; to do the trick. It removes the rounded corners off of the input, but the problem is that I can't set the border-radius after doing that. I want the search to have a 10px border radius.
Make sure that the appearance property is first and place the other properties after it. Try this:
body {
background: black;
color: white;
}
input[type="search"] {
-moz-appearance: none;
-webkit-appearance: none;
border: 0px none transparent;
border-radius: 10px;
line-height: 20px;
background: #efdefc;
color: #930;
padding: 3px 5px;
}
<input type='search'>
Related
I want to change the accent color of a custom range slider input. To override the default style, I used the property "-webkit-appearance: none". However, if that option is applied, the accent color is not shown. If I choose ""-webkit-appearance: slider-horizontal", I lose my custom CSS and it goes back to the default style.
This difference with the -webkit-appearance happens in Chrome.
I also tried using the "accent-color" in a class with "::-webkit-slider-runnable-track" but I had the same results.
HTML:
<input type="range" value="1000" min="1000" max="10000" class="slider">
CSS:
.slider {
-webkit-appearance: none;
accent-color: #F76900 !important;
background: #c7c1c1;
border: none;
border-radius: 10px;
height: 5px;
opacity: 0.7;
outline: none;
width: 100%;
}
.slider::-webkit-slider-runnable-track {
accent-color: #F76900;
border: none;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #F76900;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #F76900;
cursor: pointer;
}
Is there a way to fix this? Thank you in advance!
Additionally, how could I make it appear the same for other browsers like Firefox?
Here is how it looks from my source files
And here is how it looks from where it is hosted
Obviously alot wrong with it but the one thing I'm most worried about is that border around the blue button.
Here's the HTML code for each button.
Blue Button
View The Line Up</button>
Grey Button
View The Line Up!</button>
and the CSS.
Blue Button
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
background: #358cb1;
padding: 10px 30px 10px 30px;
text-decoration: none;
float: left;
margin-top: 20px;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
Grey Button
.btn2 {
-webkit-border-radius: 31;
-moz-border-radius: 31;
border-radius: 31px;
font-family: Arial;
color: #000000;
font-size: 14px;
padding: 10px 30px 10px 30px;
border: solid #000000 1px;
text-decoration: none;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.btn2:hover {
background: #acb0b3;
text-decoration: none;
}
If you want a solid, single-colour border, then:
border-style: solid;
It looks like it's set to something like inset or outset which are meant to create a quasi-3D effect, Windows 98-style.
If you don't want any border at all, then:
border: 0;
I'm not sure what do you want exactly but why are you wrapping an <a> tag around a <button> ? try this as in this JS Fiddle
View The Line Up
View The Line Up!
border:none; will get rid of the border.
As an aside, having a button inside of a link sounds redundant. Why not style the link instead (and apply display:inline-block;)?
My button text
I am trying to create a split button that looks like the default button, but every time I remove the border to create the split button, the arrow button loses its styling.
So, I want it to look like this:
But instead, I am getting this:
What am I missing? Here's the code:
.splitbtn-group {
position: relative;
float: left;
margin-top: 5px;
margin-left: 15px;
display: inline-block;
height: 24px;
}
.splitbtn {
position: relative;
float: left;
left: 20px;
height: 24px;
vertical-align: middle;
font-family: Tahoma;
font-size: 12px;
background: ButtonFace;
color: ButtonText;
border: 2px outset ButtonFace;
}
.splitbtn.splitbtn-drop {
border-left: 0;
}
<div class="splitbtn-group">
<button class="splitbtn splitbtn-main" data-bind=""> Assign Vaccines</button>
<button class="splitbtn splitbtn-drop" data-bind="">▼</button>
<ul class="splitbtn-drop-menu">
<li>Assign Vaccines</li>
<li>Unassign Vaccines</li>
</ul>
</div>
The default style of a button elements varies by browsers and operating systems, as the case with all the form elements.
The default styling in your case is given by the browser, from what I can see it seems to be Chrome, so if you apply any CSS to the buttons it will fallback to the default OS styling.
Though in your case the buttons style is changed to an even different one. I found out that it is because it only contains non-ASCII.
Adding a span with a white-space seems to be working with it (will also work without the span, just enter a space.)
<button class="splitbtn splitbtn-drop" data-bind="">▼ <span> </span></button>
Anyways the default styling is changed to the default OS style, in my case Windows 8.
Use custom CSS styles to make it look like the default:
.splitbtn {
background-color: ButtonFace;
-webkit-appearance: none;
border: 1px outset #999;
background-image: -webkit-linear-gradient(90deg, #ccc, #fff);
}
Do remember to use vendor prefixes for other browsers as well for the background-image property and also change background: ButtonFace; to background-color: ButtonFace;
You have to style the buttons completely in order to make it consistent. Else the inconsistency between the browser's and OS' default styling would persist.
Here's a demo with full code:
.splitbtn-group {
position: relative;
float: left;
margin-top: 5px;
margin-left: 15px;
display: inline-block;
height: 24px;
}
.splitbtn {
position: relative;
float: left;
left: 20px;
height: 24px;
vertical-align: middle;
font-family: Tahoma;
font-size: 12px;
background-color: ButtonFace;
color: ButtonText;
border: 2px outset ButtonFace;
-webkit-appearance: none;
border: 1px solid #999;
background-image: -webkit-linear-gradient(90deg, #ccc, #fff);
}
.splitbtn.splitbtn-drop {
border: 0;
-webkit-appearance: button;
}
<div class="splitbtn-group">
<button class="splitbtn splitbtn-main" data-bind=""> Assign Vaccines</button>
<button class="splitbtn splitbtn-drop" data-bind="">▼<span> </span></button>
Just give:
border-style: solid;
On IE11 the focus rectangle is very noticable..
I reviewed my css file and couldn't find any related style...
Does anyone encounter this? How can I solve it?
This focus rectangle is not present on earlier IE versions....
UPDATE:
Thanks to #Tim B James I have modified the css:
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
outline: 0;
}
input:focus, textarea:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
button :focus {
border: 1px solid #7ac0da;
outline-style: dotted;
outline-width: thin;
}
Thank you very much.
Use outline: none in your CSS rules for those buttons (or specify a different, less noticeable, outline). See https://developer.mozilla.org/en-US/docs/Web/CSS/outline
.ui_btn , .sub_txt {
margin: 2px 0px 2px 3px;
background:#181c18;
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
text-transform:lowercase;
}
.ui_btn input, .sub_txt input , .disabled input{
border-spacing: 0px;
background: none;
color: #fff;
outline:0!important;
margin:0!important;
cursor: pointer;
display: inline-block;
font-weight: bold;
border: 1px solid #181c18;
font-family: Arial, sans-serif;
font-size: 11px;
padding: 7px 6px!important;
white-space: nowrap;
text-transform:lowercase;
line-height: 12px!important;
}
And this is my button:
<label id="SD_mrs_t" class="ui_btn" for="SD_mrs">
<input id="SD_mrs" value="More Specific" type="button"/>
</label>
As a result button in Firefox has something like:
padding: 9px 8px!important;
Is there any solution without definition of special parameters for Mozilla browser?
Firefox applies a special padding to buttons, which you can address like this:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
In Firefox, the input button has more padding, this might help to resolve it:
/* Remove button padding in FF */
button::-moz-focus-inner {
border:0;
padding:0;
}
Also, this question seems more or less the same (above code is suggested there): CSS: Size of buttons in Chrome is different than Firefox
If you use a reset.css in your stylesheet, it can set the default values for all browsers on load, then the firefox button wouldn't be bigger. I use this one:
http://meyerweb.com/eric/tools/css/reset/