The separator image isn't displaying on the right side of the input field. I tried using a plain border and with different positioning, as well as with an image as in my example, but it doesn't show.
PS. This is the seperator image:
jsfiddle
.ui-topbanner {
color:#000;
height: 31px;
background-color: #f2e9da;
border-bottom: 1px solid #d9cebc;
}
.ui-topbanner-title {
position:absolute;
top:5px;
left:4px;
height:26px;
line-height:26px;
padding:0 10px 0 25px;
display:inline-block;
color:#000;
border:1px solid #d9cebc;
border-bottom:none;
background-color:#fff;
font-size:.7rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-image: url(http://hardist.eu/public/img/icon_folderyellow3.gif);
background-position: 5px 5px;
background-repeat: no-repeat;
}
.ui-topsubbanner {
position:relative;
color:#000;
height: 30px;
background: -webkit-linear-gradient(top, #f7f1e8 0%, #f4ecdf 100%);
border-top: 1px solid #fff;
border-bottom: 1px solid #efe8da;
}
.ui-topsubbanner-wrapper {
padding:2px 3px 0 5px;
}
.ui-seperator {
width:2px;
height:17px;
display:inline-block;
background-image: url(../images/ui-seperator.png);
background-position: 0 6px;
background-repeat: no-repeat;
}
<div class="ui-topbanner"><div class="ui-topbanner-title">Test</div></div>
<div class="ui-topsubbanner">
<div class="ui-topsubbanner-wrapper">
<input type="text" class="input-search" placeholder="Search...">
</div>
<div class="ui-seperator"></div>
</div>
Check setting float property. It may help you.
.ui-topsubbanner-wrapper {
padding:2px 3px 0 5px;
float: left;
}
.ui-seperator {
width:2px;
height:17px;
display:inline-block;
background-image: url(http://i.imgur.com/ovVm6fW.png);
background-position: 0 6px;
background-repeat: no-repeat;
float: left;
}
The image is actually there, but it's hard to see because it's so similar in color to background and not where you expect. Because the topsubbanner-wrapper div is a block element by default, the separator was getting bumped to the beginning of the next line. I couldn't see it at all until I changed the background of the separator div to red for diagnostic purposes.
You can fix the problem by setting the display of the topsubbanner-wrapper div to inline-block, as you did with the separator, or by setting its float to left.
Related
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;
}
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>
I want to increase the distance between the border and the background-image ... I tried to add padding: 20px; but it doesn't work.
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width: 100px;
height: 75px;
display: block;
}
.Tab1:hover {
border: 1px solid green;
}
<div class="Tab1"></div>
You can increase the space between the border and the background image with padding and background-clip:content-box; (see MDN for more info).
Also don't forget to center the background image with background-position:center;
.Tab1 {
background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
width:100px;
height:73px;
display:block;
padding:20px;
background-clip:content-box;
}
.Tab1:hover {
border:1px solid green;
}
<div class="Tab1"></div>
If you also want to avoid the position snap on hover created by the border, you can add a transparent border and only change the colour on hover :
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat: no-repeat;
background-position: center;
background-clip: content-box;
width: 100px;
height: 75px;
display: block;
padding: 50px;
border: 1px solid transparent;
}
.Tab1:hover {
border-color: green;
}
<div class="Tab1"></div>
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat:no-repeat;
background-position:center;
background-clip:content-box;
width:100px;
height:75px;
display:block;
padding:20px;
}
.Tab1:hover{border:1px solid green;}
This is what you need, you first align the background to the centre of the box and then add a padding with the padding CSS, as you originally tried to do. The background-repeat property will stop the background repeating into the padding of the CSS.
Please also remember to add units to the padding value, just in case you had tried to do what you'd written as adding padding:20.
You can check here the space between image and border...
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width:100px;
height:75px;
display:block;
padding:15px;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
}
.Tab1:hover{border:1px solid green;}
<div class="Tab1">
</div>
thanks
css code
.Tab1 {
background:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
background-repeat:no-repeat;
width:100px;
height:75px;
display:block;
padding:15px;
}
.Tab1:hover {
border:1px solid green;
margin-left:-1px;
margin-top:-1px;
}
I have the following div stricture.
<div class="profile_outer>
<div class="profile"></div>
</div>
And the following CSS
.profile_outer {
border: 2px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 100;
}
.profile_outer:hover {
background-color: blue;
}
you can find the fiddle here
Both divs do not have a background, the background is determined by an image on some parent div. So they are transparent.
So, on a hover I just want to change the background of the outer profile. It only works if I also change the background color of the inner div using
.profile_outer:hover .profile {
display: block;
background : #fff; // but I do NOT want to change the background
}
I tried the following combinations of these:
.profile_outer:hover .profile {
display: block;
background : none !important;
background-color:transparent;
}
Thanks for your help.
Well, I guess that the effect that you want is this
.profile_outer {
border: 2px solid #660000;
border-radius: 5px;
overflow: hidden;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
border-radius: 5px;
z-index: 100;
}
.profile:hover {
box-shadow: 0px 0px 0px 1000px blue;
}
fiddle
... but you should review your ideas about transparency ...
After re-reading the question, I think that Moob's sugestion is right, the answer to the question is
.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}
Set the child's background to #fff and it'll work.
Your problem happens because the default background color for all elements is transparent
There is one other way to get this effect but it could be really annoying to implement. I'm only offering it up as a solution for completeness. Effectively you have the SAME background image on the bit that is supposed to appear masked:
body {
margin:0px;
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') 0 0 repeat;
}
.profile_outer {
margin:20px; /* added this just to show that you'd need to offset the image placement in .profile depending on its position */
}
.profile {
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') -20px -20px repeat;
}
http://jsfiddle.net/PdQFJ/1/
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/