I have created a toggle-button that is not working in the IE-browser. I have doubts regarding the web-kit appearance and the border.
Here is a working snippet of my code:
.contain {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
background: #d6d6d6;
border-radius: 20px;
margin: 10px;
}
.checkbox {
position: absolute;
width: 28px;
height: 28px;
-webkit-appearance: none;
background: white;
border: 1px solid;
border-radius: 50%;
top: -5px;
left: -10px;
outline: none;
}
.checkbox:checked {
left: 20px;
}
<label class="contain" >
<input type="checkbox" id="checkbox" class="checkbox" />
</label>
The border is fine in Chrome but in the Internet-Explorer the border-radius is not applied.
It appears that the problem is with the .checkbox element, you haven't specified a border color for it which might be why you aren't seeing the border.
You could add it at the end of the border property, like this:
.checkbox {
width: 28px;
height: 28px;
position: absolute;
top: -5px;
left: -10px;
-webkit-appearance: none;
border: 1px solid red;
border-radius: 50%;
outline: none;
background: white
}
Or you could split the border property into border-width, border-style and border-color properties, like this:
.checkbox {
width: 28px;
height: 28px;
position: absolute;
top: -5px;
left: -10px;
-webkit-appearance: none;
border-width: 1px;
border-style: solid;
border-color: red;
border-radius: 50%;
outline: none;
background: white
}
Another thing you could try to do is make the border thicker, by changing the border's width (1px) to 2px/3px.
Good luck.
just add
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
to the checkbox class
Related
I have a range slider on my web which is working fine on all browser other than IE. I am using background image for thumb but that image is not showing on IE and also i am using pseudo element to show starting and ending point, which is also not visible on IE. Here is my code
<input type="range" data-link="test" class="range-slider__range" min="500" step="500" max="10000">
input.range-slider__range {
-webkit-appearance: none;
max-width:100%;
height: 2px;
border:1px solid #06C3C3 !important;
outline: none;
padding: 0;
margin: 50px 0;}
input.range-slider__range:before {
content: '';
width: 7px;
height: 7px;
position: relative;
display: block;
top: -3px;
left: -2px;
border-radius: 50%;
background: #06C3C3;}
input.range-slider__range:after {
content: '';
width: 7px;
height: 7px;
position: relative;
display: block;
top: -3px;
left: 2px;
border-radius: 50%;
background: #06C3C3;}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: url("https://dummyimage.com/40/000/fff.jpg");
width: 186px;
height: 49px;
background-repeat: no-repeat;
cursor: pointer;}
.range-slider__range::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
background: url("https://dummyimage.com/40/000/fff.jpg");
width: 186px;
height: 49px;
background-repeat: no-repeat;
cursor: pointer;}
You use :-webkit-slider-thumb and ::-moz-range-thumb which, by their name, are properties for webkit browsers like chrome/safari etc. and moz which is for mozilla firefox .
So of course it won't appear on IE. For IE you can use ::-ms-thumb together with ms-track
:after,:before are pseudo-elements that are used to insert content after of the before the content of an element. input elements do not have content. ( just like img or hr etc. ). So the behavior in IE, to NOT display :after or :before on a 'non-content' HTML element.
, is the correct one.
You can wrap your input inside a label and add pseudo-elements to it.
Example below ( for IE )
input[type=range]::-ms-track {
width: 300px;
height: 5px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
label {
position: Relative;
}
label:after,
label:before {
content: '';
width: 7px;
height: 7px;
position: absolute;
display: block;
top: 0;
border-radius: 50%;
background: #06C3C3;
}
label:before {
left: 2px;
}
label:after {
right: 2px;
}
<label>
<input type="range" data-link="test" class="range-slider__range" min="500" step="500" max="10000">
</label>
I am trying to set outline width of the input element on focus.
Outline width stays the same (like it is default setting which can not be changed), no matter of my setting.
Here is example from code pen
And here is part from css where I am trying to set outline-width on focus:
input:focus {
outline-width: 0.1px;
outline-color: #725b44;
}
EDIT:
I've just forgotten to include line style (solid, dotted...).
Now it works. One thing is still strange to me. Why is outline inside element?
Isnt' the outline defined as 'a line that is drawn around elements (outside the borders) to make the element "stand out".'
Here from my example outline looks like this. I thought it's going to be around element, but it's inside:
Add outline-style: solid to your css.
Since the default style for the outline-style property is none, you will have to set it as well (none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit). Best value you can use for the style is solid, but that's a matter of preference.
Example for the behavior:
input {
font-size: 22px;
padding: 5px 3px;
color: #666;
}
input.with-outline-style:focus {
outline-width: 3px;
outline-style: solid;
outline-color: #725b44;
/* You could also use the shorthand: */
/* outline: 3px solid #666; */
/* width style color */
}
input.without-outline-style:focus {
outline-width: 3px;
outline-color: #725b44;
}
body {
background-color: #fd9;
}
div {
padding: 5px 10px;
}
<div>
<input type="text" class="with-outline-style" value="outline-style set to solid" />
</div>
<div>
<input type="text" class="without-outline-style" value="outline-style not set" />
</div>
Update
The outline-width setting doesn't work without specifying outline-style: if no outline style is set, the browser will render the outline in its default style (which could be anything, such as a dotted rectangle in IE, a shaded rectangle in Chrome, or even nothing).
Use outline-style
input:focus {
outline-width: 0.1px;
outline-color: #725b44;
outline-style: dotted;
}
Only if you specify outline-style the outline-width will take effect. Please check and let me know your feedback. Thanks!
snippet below:
.divMain {
height: 100vh;
width: 100vw;
border: 0px solid black;
}
.divLogin {
position: absolute;
left: 20%;
top: 5%;
width: 300px;
height: 600px;
border: 1px solid #CF6B08;
border-radius: 3px;
}
#divLogin {
background: #FFCC99;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#FAC28A, #FFCC99);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FAC28A, #FFCC99);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FAC28A, #FFCC99);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#FAC28A, #FFCC99);
/* Standard syntax */
}
.spanTitle {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
color: #003399;
font-weight: bold;
}
.inputFirst {
position: absolute;
top: 50px;
margin-left: 5px;
width: calc(100% - 10px);
height: 30px;
}
.divWarningInputFirst {
position: absolute;
width: calc(100% - 10px);
height: 30px;
top: 88px;
margin-left: 5px;
border: 0px solid black;
background-color: #fcdcbb;
color: #ff0000;
font-weight: bold;
padding-top: 5px;
padding-left: 5px;
}
.divWarningInputFirst:after {
content: "";
position: absolute;
top: -5px;
left: 8px;
border-style: solid;
border-width: 0 5px 6px;
border-color: #fcdcbb transparent;
display: block;
width: 0;
z-index: 1;
}
input:focus {
outline-width: 3px;
outline-style: solid;
outline-color: #725b44;
}
input {
border-color: transparent;
padding-left: 3px;
box-sizing: border-box;
}
<div id="divMain" class="divMain">
<div id="divLogin" class="divLogin">
<span id="spanTitle" class="spanTitle">Login</span>
<input type="text" id="inputFirst" class="inputFirst" placeholder="input first">
<div id="divWarningInputFirst" class="divWarningInputFirst">Please enter input first</div>
</div>
</div>
Try
outline: 3px solid #725b44;
or
outline-width:3px;
outline-color:#725b44;
outline-style:solid;
.divMain {
height: 100vh;
width: 100vw;
border: 0px solid black;
}
.divLogin {
position: absolute;
left: 20%;
top: 5%;
width: 300px;
height: 600px;
border: 1px solid #CF6B08;
border-radius: 3px;
}
#divLogin {
background: #FFCC99;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#FAC28A, #FFCC99);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FAC28A, #FFCC99);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FAC28A, #FFCC99);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#FAC28A, #FFCC99);
/* Standard syntax */
}
.spanTitle {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
color: #003399;
font-weight: bold;
}
.inputFirst {
position: absolute;
top: 50px;
margin-left: 5px;
width: calc(100% - 10px);
height: 30px;
}
.divWarningInputFirst {
position: absolute;
width: calc(100% - 10px);
height: 30px;
top: 88px;
margin-left: 5px;
border: 0px solid black;
background-color: #fcdcbb;
color: #ff0000;
font-weight: bold;
padding-top: 5px;
padding-left: 5px;
}
.divWarningInputFirst:after {
content: "";
position: absolute;
top: -5px;
left: 8px;
border-style: solid;
border-width: 0 5px 6px;
border-color: #fcdcbb transparent;
display: block;
width: 0;
z-index: 1;
}
input:focus {
outline: 3px solid #725b44;
}
input {
border-color: transparent;
padding-left: 3px;
box-sizing: border-box;
}
<div id="divMain" class="divMain">
<div id="divLogin" class="divLogin">
<span id="spanTitle" class="spanTitle">Login</span>
<input type="text" id="inputFirst" class="inputFirst" placeholder="input first">
<div id="divWarningInputFirst" class="divWarningInputFirst">Please enter input first</div>
</div>
</div>
This might help you!
You should add 1px instead of 0.1px with outline-style
input:focus {
outline:1px solid #725b44;
}
Rather than Is it possible to always show up/down arrows for input "number"?, I want to be able to make up/down arrow much bigger and cleaner.
What I have right now:
I need to make them bigger like this:
you can wrap a input in and element and style it
div {
display: inline-block;
position: Relative;
border: 2px solid grey;
border-radius: 10px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div:before,
div:after {
background: white;
right: 0px;
width: 30px;
height: 20%;
position: absolute;
pointer-events: none;
}
div:before {
content: '';
bottom: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
background-position: center;
}
div:after {
content: '';
top: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
transform: rotate(180deg);
background-position: center;
}
input {
height: 80PX;
font-size: 50px;
outline: 0;
border: 0;
}
<div>
<input type="number" value="10" />
</div>
well, to achieve that you have to play with pseudo elements and some CSS3 tricks.
to create triangle https://css-tricks.com/snippets/css/css-triangle/
to manipulate input number spinners
input[type=number]::-webkit-inner-spin-button {
/* your code*/
}
here is the example.
input {
color: #777;
width: 2em;
font-size: 2em;
border-radius: 10px;
border: 2px solid #ccc;
padding: 5px;
padding-left: 10px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor: pointer;
display: block;
width: 10px;
text-align: center;
position: relative;
background: transparent;
}
input[type=number]::-webkit-inner-spin-button::before,
input[type=number]::-webkit-inner-spin-button::after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 10px solid #777;
}
input[type=number]::-webkit-inner-spin-button::before {
top: 7px;
}
input[type=number]::-webkit-inner-spin-button::after {
bottom: 7px;
transform: rotate(180deg);
}
<input type="number" value="1">
Another solution, offering uniformity between browsers and more customisation options, would be to use the JQuery UI spinner element.
I'm creating my own version of Twitter Bootstrap radio buttons purely based on CSS. The visual feedback for selected radio button is based on input[type="radio"]:checked + span.
As the content of my "buttons" can vary, the width is dynamic. This causes problem aligning the button next to each other.
In my JSfiddle I've set fixed width of 50px. Removing this and the buttons are on top of each other.
Can anyone point me in the right direction of how I can accomplish this?
Here is my code:
//HTML
<div class="button-group binary" data-toggle="buttons-radio">
<div class="radio-wrapper">
<input type="radio" class="active" name="status" value="1" />
<span class="background">Yes</span>
</div>
<div class="radio-wrapper">
<input type="radio" class="inactive" name="status" value="0" checked="checked" />
<span class="background">No</span>
</div>
</div>
//CSS
.button-group{
/*display: table;*/
display: block;
}
.radio-wrapper {
/*display: table-cell; */
display: inline-block;
position: relative;
height: 28px;
margin: 0;
width: 50px; /* I want this to be dynamic */
}
.radio-wrapper:first-child .background{
border-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.radio-wrapper:last-child .background{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
input[type="radio"]{
position: absolute;
display: block;
height: 28px;
width: 100%;
z-index: 200;
cursor: pointer;
opacity: 0;
}
input[type="radio"]:checked + span {
background-color: #63B1DE;
color: #fff;
}
.background {
position: absolute;
z-index: 100;
height: 100%;
padding: 0 5px;
border: solid 1px #87A2B2;
background-color: #fff;
text-align: center;
line-height: 28px;
text-transform: uppercase;
}
If you remove position: absolute from you background class, you will no longer need the width style:
jsFiddle
.button-group{
/*display: table;*/
display: block;
}
.radio-wrapper {
/*display: table-cell; */
display: inline-block;
position: relative;
height: 28px;
margin: 0;
/*width: 50px; not needed*/
}
.radio-wrapper:first-child .background{
border-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.radio-wrapper:last-child .background{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
input[type="radio"]{
position: absolute;
display: block;
height: 28px;
width: 100%;
z-index: 200;
cursor: pointer;
opacity: 0;
}
input[type="radio"]:checked + span {
background-color: #63B1DE;
color: #fff;
}
.background {
z-index: 100;
height: 100%;
padding: 0 5px;
border: solid 1px #87A2B2;
background-color: #fff;
text-align: center;
line-height: 28px;
text-transform: uppercase;
}
Having a look at your CSS, I think the issue you are having is because you are making the .background position: absolute it is not taking up any space in its parent, so the parent doesn't really have any width, this is why you have to manually set it. Stripping out the absolute positioning for the .background and actually making it an element that takes up space will give the parent a width (which will be based on its content). Now as far as correcting the on top of each other issue, I would think some floating here would work. CSS is here (I also removed some unnecessary rules)
.radio-wrapper {
position: relative;
float:left;
}
.radio-wrapper:first-child .background{
border-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.radio-wrapper:last-child .background{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
input[type="radio"]{
position: absolute;
display: block;
height: 28px;
width: 100%;
z-index: 200;
cursor: pointer;
opacity: 0;
}
input[type="radio"]:checked + span {
background-color: #63B1DE;
color: #fff;
}
.background {
height: 100%;
padding: .5em;
border: solid 1px #87A2B2;
background-color: #fff;
text-align: center;
line-height: 28px;
text-transform: uppercase;
}
As per example fiddle.
I did add a bit more padding that you had though so please feel free to adjust as required. I also like padding in ems so if your font changes in size the padding is always relative.
I'm trying to create a tag shape with the css only so that it looks like:
I'm trying following but unable to use the border for the triangle area.
HTML:
Test
CSS:
a{
float: left;
height: 35px;
position:relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before{
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 18px 18px;
}
JSFiddle:
http://jsfiddle.net/Sac3m/
You could rotate a square instead, although i doubt the results will be great cross-browser
Modified code:
a {
float: left;
height: 35px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:after {
content: "";
position: absolute;
top: 4px;
right: -13px;
width: 25px;
height: 25px;
border: 1px solid red;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<a></a>
(Latest IE, Firefox and Chrome seems OK with it)
Update
If you need IE8 support, you could try to put a white triangle on top of the (original) red triangle:
a {
float: left;
height: 36px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before {
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 19px 19px;
}
a:after {
content: "";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 18px 0 18px 18px;
}
<a></a>
The below code helps to create a tag shape. It works in all major browsers.
#swc {
position: relative;
margin: 0 5px 0 10px;
display: inline-block;
height: 66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height: 65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background: #f3f3f3;
transition: background 0.3s;
}
#swc:after {
position: absolute;
content: "";
right: -19px;
width: 1px;
height: 0px;
border-left: 18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
#swc:hover {
background: green;
color: #ffffff;
}
#swc:hover:after {
border-left-color: green;
}
<span class="pricetag-right" id="swc">Tag Content!</span>
We had a slightly different implementation of this that produces rounded corners. This uses a rounded square that's turned 45°.
.tag {
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 transparent #c8d7f2 #c8d7f2;
border-radius: .25em 0 0 .25em;
padding: 0.1em 0.6em 0.1em 0.3em;
background-color: #e5ecf9;
line-height: 1.2em;
}
.tag:after {
content: "\25CF";
position: absolute;
display: inline-block;
height: 1.2em;
width: 1.17em;
transform: rotate(45deg);
color: white;
text-indent: 0.3em;
line-height: 1em;
text-shadow: 0 0 1px #333;
background-color: #e5ecf9;
border-radius: 0.33em 0.33em 0.33em 1em;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 #c8d7f2 transparent transparent;
}
<h1 class="tag">my-tag</h1>
A couple things to note:
The square contains a circle punctuation mark. To adjust it you use line-height and text-indent.
The borders on the square need to be set to transparent color with a width of 1px. If you don't, the other borders (the visible ones) taper off where they go from 1px to 0px.
his works pretty well and it's nearly pixel-perfect, but it does render slightly differently across Chrome and Firefox. I tried to make it work with a transparent background, but you need some sort of color to cover up the funkiness where the square meets the tag. It's not quite perfect.
The nice thing about this is that it can be applied as a class and it can be used on H1-H6, or p tags.