When the form is auto-filled, the icon is gone, and how can I fix that?
Someone asked similar question, but was never answered. A forgotton question
CSS:
input[type=text] {
width: 200px;
height: 25px;
padding: 0;
border: solid 1px;
}
#name {
background: url(images/icons/user.jpg) no-repeat;
background-size: 20px 20px;
background-position: 5px;
padding-left: 25px;
}
OK, This problem happens because the browser auto-filling changes the background color to yellow and I think there are no way to override this auto-filling because you use background-image, we just can override the background-color like that:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
But we have some things to do :
1- you can use autocomplete="off" to prevent auto complete and we can avoid this problem.
2- you can give the background image to another element like using :before for the div which contain the input element, I made demo for this solution and you can see it here : https://jsfiddle.net/IA7medd/obc68xhw/
HTML:
<div class="inputContainer">
<input type="text">
</div>
and the style :
input[type=text] {
width: 200px;
height: 25px;
padding: 0;
border: solid 1px;
background:white;
padding-left: 25px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
.inputContainer{
display:inline-block;
position:relative;
}
.inputContainer:before{
content:"";
position:absolute;
width:20px;
height:20px;
top:3px;
left:5px;
background: url(https://image.freepik.com/free-icon/male-user-shadow_318-34042.png) no-repeat;
background-size: 20px 20px;
}
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
Im a beginner in css so please bear with me :D
I tried to create this custom textfield :
So i have 2 different colors, just say color A for the inner background (the big one) and color B for the outer one.
So i think the outer one (color B) could be a <span> and color A is a <input type="text">
(I dont know if this is the best way to do it, im very open to other solution because my lack of experience in css)
So this is my html code :
<div id="search">
<span><input type="text" id="txtSearch"/></span>
</div>
And this is my css :
/*THIS IS COLOR B, THE OUTER ONE*/
#search span {
background: #c4a76e;
overflow: auto;
margin: 3%;
}
/*THIS IS COLOR A, THE INNER ONE*/
#search #txtSearch {
float: left;
border-radius: 3%;
background: #fdf4d6;
padding: 5%;
border: thin solid black;
}
I plan to make the padding background color to color B, and the textfield it self color A, but its not working. I just get a textfield with background color A.
What should i do?
Any help is appreciated and just let me know if you need something else.
Thanks for your time :D
Here you go, check DEMO http://jsfiddle.net/yeyene/UcTsv/2/
Screenshot
Use this css and done.
/*THIS IS COLOR B, THE OUTER ONE*/
#search span {
float:left;
margin:0;padding:0;
border:2px solid #403726;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background:#d9b980;
}
/*THIS IS COLOR A, THE INNER ONE*/
#search #txtSearch {
margin:0;
width:170px;
background: #ffe692;
padding: 10px;
border:5px solid #d9b980;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
hmmm... i'm seeing three colors.. black, brown and yellowish brown. but in case there's only brown and yellowish brown. you don't need #search span anymore.
you can just use
border: 3px solid #c4a76e; for #search #txtSearch
I believe this is what you are looking to code, and the colors might not be the same.. just picked them out randomly :)
http://codepen.io/AmruthPillai/pen/DJiao
You could simplify it even more, using just the input (example http://jsfiddle.net/slash197/2zn8B/):
CSS
input {
box-shadow: 0px 0px 0px 10px #ff0000;
background-color: #00ff00;
border: 1px solid #000000;
}
HTML
<input type="text" />
This comes a little close
<div id="search">
<div><input type="text" id="txtSearch"/></div>
</div>
#search div {
border : solid 1px black;
float : left;
max-width : 100%;
padding : 10px;
background-color: #fdf4d6;
border-radius: 3%;
}
#search #txtSearch {
float : left;
border-radius: 3%;
background: #c4a76e;
padding: 15px;
border: solid 0px #fdf4d6;
}
I am having a problem with the following code. I cannot pad the logo (x12creatiΩns) down from the top. I have tried top:10px as above but it doesn't do anything.
HTML
<div id='header'>
<span id='logo'>
x12creatiΩns
</span>
<span id='sublogo'>Just another portfolio...</span>
</div>`
CSS
span#logo {
font-size:2.2em;
color: black;
padding-left:10px;
text-shadow:0px 1px 0px white;
top:10px;
}
a#logo {
text-decoration: none;
color: black;
}
a#logo:hover {
padding-top:10px;
text-decoration: none;
color: #555;
}
div#header {
background-color:#DDD;
width:100%;
height:44px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#CCC;
}
Try taking off the a
Like this
#logo:hover{}
Or if you need to acces the anchor try this
#logo a:hover{}
add display: inline-block to your a#logo - http://jsfiddle.net/tmaHx/1/ - and then you can use margins/paddings
a#logo {
text-decoration: none;
color: black;
display: inline-block;
margin-top: 20px
}
Add display:inline-block to your span#logo declaration and and just add some top margin and that should work. Also, you're repeating your "logo" ID twice; Once in your span tag and again in your logo a tag, that won't validate.
because a is an inline element you have to add display:block; then you can add margins and paddings !
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