I'm experimenting with css and I'm trying to add a dynamic pseudo-class in my selector. Here is the HTML-markup snippet.
<div id="child">
<input type="text" id="text"/>
</div>
and it's corresponding css-style
input[type="text"]{
width: 150px;
height: 25px;
}
input[type="text"]:hover, input[type="text"]:focus{
border: 1px solid grey;
}
#child{
padding: 5px;
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
Here is the JSFIDDLE example. So when the mouse hovers over the text element the size of the text element is reduced as follows:
Would anyone know why this reduction in size is occurring?
Now in your code what is happening is that you have set the input fields width and height to 150px and 25px respectively.Now when you add 1px border to it it will reduce the inside(white) portion of the input field to maintain the width and height as mentioned(150px and 25px). To solve this you can add 2px to both width and height on hover.Fiddle :
http://jsfiddle.net/z78BN/6
input[type="text"]:hover, input[type="text"]:focus{
width: 152px;
height: 27px;
border: 1px solid grey;
}
That is because of two things outline and pseudo 3d default border of input.
Add
input[type="text"]{
border: 1px solid aqua;
}
input[type="text"]:focus{
outline:none;
}
Related
I created class border for a link and put the link into that border. Then when I see by responsive device link is over length form that border while I try to keep sentence into border it has no problem.
How can I resolve it?
My CSS:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
You probably used an element with display: block as a host of your .border class:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<div class="border">
Google
</div>
<div>'s default display value is block, hence full width.
What you need is using an element with display: inline:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<span class="border">
Google
</span>
Or, simply add display: inline to your .border styles:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
display: inline; /* <---- */
}
<div class="border">
Google
</div>
I am trying to implement a double border as shown below with CSS - ideally without using extra elements.
My initial thought would be to apply the first border to the container element, and the second to the title element below.
.box {
border-top: 1px solid black;
}
h2 {
float: left;
border-top: 2px solid red;
margin-top: 0;
padding-top: 10px;
padding-right: 5px;
}
<div class="box">
<h2>Title</h2>
<p>Some text here</p>
</div>
The main issue here is that the requirement may be that the width of the small border is indepedent of the width of the text. Also we may run into problems with line-height / vertical text alignment.
Are there are other viable solutions to this problem?
I hope the below CSS code will help you.
.box{
border-top: 2px solid gray;
}
h2{
width: 200px;
height: 300px;
border-top: 2px solid red;
position: absolute;
top: -12px;
}
I am facing an issue with IE browser (all versions till IE 10). Issue
Text in input box is overlapping its background image. I cant put this image in parent div as its a dynamic input box and having lot of other functionality. and i cant increase the width of textbox than 100px and value is about 50 characters.
pls help.
CSS
.some {
background:url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png) no-repeat right center;
padding:1px 15px 1px 1px;
border:1px solid #ccc;
width:100px;
color:red;
overflow:hidden;}
HTML
<input type="text" class="some" value="I am a messy input box" />
Try this demo with IE8: http://jsfiddle.net/74u4w/2/
If it works, just add the border to the image and you will have a fix
.some {
background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
background-position: 105px -6px;
background-repeat: no-repeat;
padding: 1px 1px 1px 1px;
border: 1px solid #ccc;
border-right: 25px solid transparent;
width: 100px;
color: red;
overflow: hidden;
}
If not, then the last resort is a small javascript that appends an img/div after your input. (which can be done dynamically)
With an absolute position set, it will not affect the flow. This css sample shows how it could look:
.some {
padding: 1px 1px 1px 1px;
border: 1px solid #ccc;
width: 80px; /* narrowed to fit img */
color: red;
overflow: hidden;
}
.someimg {
background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
background-position: center center;
background-repeat: no-repeat;
position: absolute;
overflow: hidden;
left: ?px; /* needs to be calculated based on each input */
top: ?px; /* needs to be calculated based on each input */
width: 20px;
height: 20px;
}
Decrease input field width and add padding from right
DEMO FIDDLE
I'm using the following code for the 2 borders of different colors, and space between the borders. I'm using the property outline-offset for the space between the borders. However it is not supported in IE (not even IE9).
Is there any alternate solution which works in the IE as well, without adding another div in the html.
HTML:
<div class="box"></div>
CSS:
.box{
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid green;
outline:2px solid red;
outline-offset: 2px;
}
The height and width is not fixed, i have just used for the example.
JSFiddle:
http://jsfiddle.net/xyXKa/
Here are two solutions. The first is IE8+ compatible, utilizing pseudoelements. View it on JSFiddle here.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid green;
}
.box:after {
content: "";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 108px;
height: 108px;
border: 2px solid red;
}
The second idea I have is a non-semantic solution, but gives you IE6+ support. View it on JSFiddle here.
HTML:
<div class="outer-box"><div class="inner-box"></div></div>
CSS:
.outer-box {
width: 104px;
height: 104px;
margin: 100px;
border: 2px solid red;
padding: 2px;
}
.inner-box {
width: 100px;
height: 100px;
border: 2px solid green;
}
Oh woops, I just saw that you requested leaving just a single div. Well, that first solution fits those requirements!
Some more solutions. I've used them successfully:
1.
.box {
outline:2px solid green;
border:2px solid transparent;
box-shadow: 0 0 0 2px red inset;
}
Restriction of this solution: "outline" property ignores "border-radius" one.
2.
.box {
border: 2px solid green;
box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px red inset;
}
Restriction of this solution: space between red and green borders can't be transparent because red box-shadow will be visible through it. So, any solid color needed, I've set #fff.
My issues with other solutions toward this end:
"outline-offset" is not compatible with IE; pseudoelements method requires absolute positioning and pixel ratios (no good for my responsive design); inset box-shadow does not display over an image.
Here is the fix I used to responsively frame images in an IE compatible way:
.container img {
border:2px solid white;
outline:4px solid red;
background-color: green;
padding: 2px;
}
"outline" defines the outer border, "border" defines the space in between, while the inner border is actually the background color with padding determining its width.
In cases where you're styling the ::focus pseudo-class, you won't have the luxury of using ::after or ::before pseudo-class as those methods are only effective on container elements (see W3C spec. for more information).
A cross-browser solution to give-off that offsetting effect is to use box-sizing, border, and padding.
You simply negate and alternate the padding and border width values.
Default / base styles:
input[type="text"] {
...
padding:10px;
border:1px solid grey;
}
Pseudo-class styles:
input[type="text"]:focus {
padding:8px;
border:3px solid red;
}
Please don't suggest I stop using <input type="submit"> I need to support non javascript-enabled users.
I have a submit button, and on :hover I apply a border to it. However I have noticed that in Firefox 15 and IE7 the border gets applied to the inside of the element. This appears to be because I have set a fixed width and a height to the element and behaves normally once I remove them. However due to browser inconsistencies I need the width and height to ensure the submit button is the same size in all browsers.
Does anyone know how to prevent the border from being drawn inside the element?
Relevant CSS:
#searchform .submit {
vertical-align: middle;
float: right;
height: 31px;
width: 31px;
position: relative;
left: -4px;
margin-right: -4px;
background-image: url(library/images/search-icon.png);
background-position: center center;
background-repeat: no-repeat;
background-color: #ffffff;
border: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
#searchform .submit:hover {
margin: -2px -6px 0px 0px;
border: 2px solid #000;
}
Relevant HTML:
<input type="submit" value="" class="submit btn" />
Wonder if there is a box-sizing property being applied to this input. box-sizing: border-box would cause border & padding to occur within width and height. I wonder if you're using a CSS template that uses the * { box-sizing: border-box; } technique. Try
#searchform .submit { box-sizing: content-box; }
try to remove the margin when hover to the button?
#searchform .submit:hover {
border: 2px solid #000;
}
Why don't you use this:
border: 2px solid #3393B5;
Or:
border: 2px solid #fff;
Instead of:
border: 2px solid #000;