How do I make the radio button shadow to be rounded in Chrome like how it is displayed in IE? Any help will be appreciated!
IE: (like this)
CHROME: (not like this)
HTML:
<div class="radio"><input type="radio"><label>C#</label></div>
<div class="radio"><input type="radio"><label>Java</label></div>
CSS
input[type="radio"] {
box-shadow: -4px 0 0 maroon;
border-radius: 10px;
}
JS FIDDLE:
http://jsfiddle.net/nikib/b85zpgu5/
You could change the -webkit-appearance property of the input element to get initial or inherit. Then style is according to your need.
input[type="radio"] {
width:15px;
height:15px;
box-shadow: -4px 0 0 maroon;
border-radius: 999px;
-webkit-appearance: inherit;
border:1px solid #999999;
position:relative;
box-sizing:border-box;
}
input[type="radio"]:checked:before {
content:"";
position:absolute;
border-radius: 999px;
left:25%;
top:25%;
width:50%;
height:50%;
background:#999999;
}
Updated Fiddle
Related
I am trying to understand why IE 7>10 is showing a black border on a submit button. In order to clear it, I have to click inside the fieldset and then it goes away. But comes back when I click send or cancel. Is this a common problem with IE? I have included screenshot. Thanks!
css code
.submit
{
margin:-50px 0 0 -148px;
background-color:#eee;
height:40px;
width:120px;
padding:0;
border:1px solid #666;
color:#42A0FF;
}
.cancel
{
margin: -51px 0 0 -20px;
background-color:#eee;
height:40px;
width:120px;
padding:0;
border:1px solid #666;
color:#42A0FF;
}
fieldset
{
background:#f2f2e6;
border-color:#cccccc #cccccc #cccccc #cccccc;
margin:10px 0 46px -150px;
width:404px;
display:block;
text-height:10px;
padding-bottom:15px;
}
Try resetting the main input
input {border:0; margin:0;padding:0;}
And add a span to give the span the border you want so it will work universally:
.input-shell {border: #ccc 1px solid}
<span class="input-shell"><input button /></span>....
Heres a JSFIDDLE:
http://jsfiddle.net/Riskbreaker/tqnhg/1/
Heres a ref of same thing:
Any way to remove IEs black border around submit button in active forms?
Finally do this:
input[type=submit],
input[type=reset],
input[type=button]
{
filter:chroma(color=#000000);
color:#cccccc;
}
I have a div I'm adding appearance: button style to it. This works but it causes a shift in Firefox, I suspect it is because of the border but using box-sizing:border-box doesn't stop it. I also tried adding width and height but it still shifts.
http://jsfiddle.net/2CEuu/2/
<div id="add-new-complaint">
<div class="plus 3"></div>
Add new Complaint
</div>
[id|=add-new]{
display: inline-block;
padding:4px;
cursor:pointer;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
[id|=add-new]:hover{
-webkit-appearance:button;
-moz-appearance:button;
appearance:button;
}
div.plus{
width:15px;
height:15px;
position:relative;
display: inline-block;
}
div.plus::before{
width:100%;
height:33.333%;
top:33.333%;
left:0;
position:absolute;
content:'';
background-color:#789dc3;
}
div.plus::after{
width:33.333%;
height:100%;
top:0;
left:33.333%;
position:absolute;
content:'';
background-color:#789dc3;
}
You can target only Firefox to fix the problem:
#-moz-document url-prefix() {
[id|=add-new]:hover{
padding: 1px;
}
}
Would it work for you?
The way I see it there are 2 solutions,
Either add/reduce padding/margin accordingly on hover to fake the shift back to its position,
like so:
a { margin: 10px 5px; padding: 10px; }
a:hover { padding: 9px 10px 10px 9px; }
Or, better, add a default transparent border:
a { border: 1px solid rgba(0,0,0,0); }
This will keep the box at the correct size until it is hovered.
How to stylize input box like image below using pure "CSS". I know this can be done via jquery, but I am enthusiast if there is way to do so using CSS. I took image from Android's Developer website.
What I did is HTML,
<form>
<label>Email Address: </label>
<div class='left'></div>
<input type='text' class='input'/>
<div class='right'></div>
</form>
And CSS,
.left {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
}
.right {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
margin-left:-1px;
}
.input {
display:inline-block;
height:30px;
font-size:16px;
width:250px;
border:1px solid #ccc;
border-width:0px 0px 1px 0px;
padding:0px 5px;
outline:none;
}
.input:hover, .input:focus {
border-color:#4ab5d9;
}
What I am trying is => Also on jsfiddle link
The only problem is, I can't found way to change the color of left and right border on hover & on focus.
One option is this
I used the sibling selector to get the hover and focus working:
.input:hover, .input:focus,
.input:hover + .right,
.input:focus + .right {
border-color:#4ab5d9;
}
and removed the "left" div. Then made these changes to the right one:
margin-top:23px;
margin-left:-260px;
width:258px;
pointer-events: none;
I was having the same problem, and I've just created a style like this that doesn't require additional markup. See http://codepen.io/killercup/pen/CBeAq for a demo.
My solution was to use multiple background images (actually, linear-gradient) which are resized using background-size. It works on Android 4.3, but I haven't tested it on any other mobile platform.
The following works in Chrome (and supports focus/hover color changes) using the background CSS property without any additional tags in the HTML:
HTML:
<input type='text' class='holo'></input>
CSS:
input.holo[type='text'] {
/* You can set width to whatever you like */
width: 200px;
font-family: "Roboto", "Droid Sans", sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 8px 6px 8px;
position: relative;
display: block;
outline: none;
border: none;
background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo[type='text']:hover, input.holo[type='text']:focus {
background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
Demo: http://jsfiddle.net/QKm37/
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet
How can I style a button on IOS to look like the default active state?
I will be using touchstart, but want the button to look like a regular button that is being pressed.
HTML:
<button class="active"> I am pressed </button>
CSS:
button.active{
???
}
Images: (sorry, they are not the exact same crop-size)
EDIT: my latest attempt is:
button.active
{
border-radius: 12px;
border: 1px solid black;
background-color: #888;
box-shadow: 0 0 2px 2px #888;
}
It’s pretty close but the border shrinks in.
You could do this, faking a second border using the :before pseudo-elements
.active{
background:#e2e2e2;
font-weight:bold;
width:92px;
padding:.5em;
border:3px solid #e2e2e2;
border-radius:15px;
position:relative;
z-index:10;
}
.active:before{
content:"";
display:block;
position:absolute;
z-index:-1;
top:1px;
left:1px;
right:1px;
bottom:1px;
border:1px solid #000;
border-radius:15px;
}
Example: http://jsfiddle.net/E3jXr/