I have two input fields in a form on my website. I have designed them to have only the bottom-border and applied the following other css:
input {
-webkit-appearance: none;
appearance: none;
border: none;
}
.loginTextField {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
border-bottom: 2px solid white;
outline: none;
}
The text fields look like this, in HTML: (Also note, there is no div with the same size behind the text field.)
<input type="email" class="loginTextField" id="loginEmail">
Currently, even though only the bottom border is set, Safari renders the text fields the following way - notice the top corners having those white pixels:
(it's easier to see on this one)
Chrome, on the other hand, renders them as desired:
I know, a similar question has been asked before. However, none of the proposed solutions work for me.
I have already tried doing something like:
border: 0 solid transparent;
border-bottom: 2px solid white;
and:
border-top: 0 solid transparent;
border-right: 0 solid transparent;
border-bottom: 2px solid white;
...without any luck.
I did notice, however, that changing the bottom-border-color to, say, green, also changes those extra pixels to that color.
Check out this working JSFiddle example.
Is there a way to have Safari not render those white pixels?
I've added box-shadow: inset 10px 10px #000; in parent element
Before:
After:
Related
I have a problem with the chrome browser. When I make custom "hr" tag with a "div" and top and bottom border, there is a white 1px line between the borders ...
IE and Firefox do well.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
I try different thing (overflow, height 0px) but with no success.
My Chrome Browser is up to date (Version 62.0.3202.94)
Thank you
Simon
Actually that is not a white space, you used light-grey color to bottom and both border top and bottom attached and it's illusion like there is white space. If you want shadow for bottom of your custom hr then you can use following css for it -
.nav_links_container_line {
border-top: 1px solid #096ebd;
box-shadow: 0px 2px 10px #000;
}
What about using a real <hr/>? With that, I don't have the rendering issue you encountered, and it actually makes more sense to use hr in its own role.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
border-left: none;
border-right: none;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
<hr class="nav_links_container_line"/>
how can we adjust the border radius of the input field focus.
HTML
<input type="text" class="rest" />
CSS
.rest{border-radius:15px;border:1px solid red;}
Removed the standard outline (which does not accept border-radius) and used a blue box-shadow instead:
.rest{
border-radius: 15px;
border: 1px solid grey;
padding-left: 8px;
}
.rest:focus {
outline: none;
box-shadow: 0px 0px 2px #0066ff;
}
<input type="text" class="rest" />
codepen demo
use the :focus pseudo selector
.rest:focus{
border-radius:0;
}
DEMO
You have to disable the outline of the element focus state:
*:focus { /*OR .rest:focus*/
outline:none;
}
Here is a FIDDLE
If you want the border-radius on the browser default focus outline you can do it only on firefox with -moz-outline-border:5px; , but this will only work on FF, however the request to implement a similar feature in WebKit was closed as WONTFIX, The plan for the future is to make the outlines follow the borders.
The other answers have covered the solution, however, the supplied CSS styles do not accurately reproduce the blue ring color or size. For example, replacing:
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
With the solutions provided, results in a purple-tinted blue
before and after pic. Instead, try this color:
.rest:focus {
outline: none;
border-radius: 8px; /* Your border radius here */
box-shadow: 0px 0px 1px rgba(0,100,255,1),
0px 0px 2px rgba(0,100,255,1),
0px 0px 3px rgba(0,100,255,1); /* #0064FF */
}
Removing the default outline when input is in focus and adding a border that should match the border radius of the default state of input
.rest:focus {
outline: none;
border: 1px blue solid;
}
.myclass {
border: 6px dotted #2d2d2d;
width:200px;
height:200px;
border-radius:100% 100% 100% 100%;
}
When i'am trying to give full border radius to border: 6px dotted #2d2d2d; in browser it showing solid border not dotted above is my css code please help me.
This only happens in Firefox I think it's a bug - it's because of the radius - you might consider using an image in this case.
CSS border radius for dotted border
Instead of writing:
border: 6px dotted #2d2d2d;
try:
border-style: doted;
border-width: 6px;
border-color: #2d2d2d;
Thats what I use when I write CSS.
I'm trying to create a custom styled text field for a client.
They want a trapezium shaped input field.
This is what I've done till now:
HTML
<input type="text">
CSS
input{
background: #ccc;
color: #000;
border-bottom: 50px solid #ccc;
padding-top:5px;
border-left: 20px solid #fff;
border-right: 20px solid #fff;
height: 0px;
width: 200px;
}
Fiddle
Any idea on how or if it's possible to make something like this: .
Something like this:
<span class="outer">
<span class="inner">
<input type="text" value="test value" />
</span>
</span>
.outer {
display: inline-block;
border-bottom: 34px solid #000;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
.inner {
display: inline-block;
margin: 1px -18px -40px -18px;
border-bottom: 32px solid white;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
input
{
background: transparent;
border: none;
display: inline-block;
font-size: 130%;
}
http://jsfiddle.net/fNCt4/4/
The input itself doesn't contribute to the shape. It's only those two spans. You could use the input element itself for the inner shape, but since you need to add markup anyway, I think you might as well add two 'generic' trapezoid helper shapes and leave the input element untouched.
You'll need two to fake the border. This is needed, because the shape itself is created by adding a border, so the visible border is constructed by overlaying a slightly smaller shape onto the other.
The rest is tricks with negative margins to allow the inner shape to be positioned over the border of the outer shape. And of course using transparent as a color, to prevent the 'negative space' of the inner shape to overwrite the outer shape.
Once again clients being complicated!
I suggest you use a background image In the CSS of a trapezium with the outside transparent so a png. Make the margins in a bit so the user doesn't write outside the trapezium.
Hope this helps
You have two options here
CSS3
Image as a background.
for css3 option check out this link http://css-tricks.com/examples/ShapesOfCSS/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}
But to make it backward compatible i would suggest you go for image as a background as a fallback for css3.
What is happening
I am running into a problem. I have a menu like this:
<div id='feeds'>
<div class='feed'>Super Dense</div>
<div class='feed'>Everything</div>
<div class='feed current-feed'>Smashing Magazine Feed</div>
<div class='feed'>Hot Questions - Stack Exchange</div>
</div>
I style this with CSS (I only show the border and background properties here):
.feed {
background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#CCC));
border-bottom: solid 1px #AAA;
border-left: solid 1px #AAA;
border-right: solid 1px #AAA;
}
.feed:first-child {
border-top: solid 1px #AAA;
}
.feed.current-feed, .feed:active {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444));
border-bottom: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
.feed.current-feed:first-child, .feed:active:first-child {
border-top: solid 1px #000;
}
This is the result (view on jsFiddle WebKit only):
Yes, Jeff, all the extra Stack Exchange feed traffic comes from me constantly reloading my feed reader. Sorry :)
The Problem
This might look nice, but there is a little problem. There is a #AAA line above a black box, and this does not look nice (pixel perfection):
My Question
Is there a way in CSS to check if the next element is of a certain class, so I can set border-bottom to solid 1px #000, or is there another way to solve my problem?
My web app heavily uses JavaScript, so if this is required, it's not a problem, but CSS is cleaner in my opinion.
One way I can think of:
Position every .feed relatively:
.feed {
position: relative;
/* ... */
}
Then find the next immediate sibling using the + combinator, make it sit above its previous sibling using a greater z-index and a negative margin, and give it the desired border (notice that this is a top border):
.feed + .feed.current-feed, .feed + .feed:active {
margin-top: -1px;
border-top: 1px solid #000;
z-index: 1;
}
The top black border will sit above the previous sibling's bottom border and thus be visible over it. The W3C box model means that the content height of each .feed isn't affected, so an equally thick negative margin is all you need to counter the thickness of the added top border.
Take a look at the preview and see if that's what you're looking for. Also, a screenshot:
You can use the jQuery .parent() function to do this:
http://api.jquery.com/parent/
JSFiddle