This question already has answers here:
Turn off iPhone/Safari input element rounding
(11 answers)
Closed 1 year ago.
I am modifying the styling of my text field inputs for a contact form I have. My desired styling is a bottom border only, which seems to work in chrome but not on Safari for mobile, the whole border remains visible. See the below images for reference.
Chrome Version 91.0.4472.114 (MacOS)
Chrome works and looks fine.
Safari iOS 14.6
Here on my mobile, it is hard to see via the screenshot be some of the top corners of the border are visible, and the bottom border curves around.
css
export const TextField = styled.input`
width: 100%;
background: #131d32;
border: none;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
min-height: 35px;
color: white;
outline: 0;
border-width: 0 0 2px;
:focus {
border-width: 0 0 1px;
}`;
Please set border-radius as 0;
export const TextField = styled.input`
width: 100%;
background: #131d32;
border: none;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
min-height: 35px;
color: white;
outline: 0;
border-width: 0 0 2px;
border-radius: 0;
:focus {
border-width: 0 0 1px;
}`;
Related
I am trying to create a box shadow around a scalene triangle that exists as a pseudo element, as shown below. I have tried many ways but cannot seem to get an even shadow below my image.
I have tried putting a second scalene triangle pseudo element with slightly larger dimensions that is grey but since there is no gradient or shadow effect, it is not what I am looking for.
Does anyone have any solutions?
Would really appreciate some ideas; perhaps there is a way to get a border gradient effect on a second pseudo element and underlay it?
.box {
height: 100px;
width: 100px;
background: blue;
position: relative;
box-shadow: 0 40px 5px 0 rgba(0, 0, 0, 0.50);
}
.box:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid blue;
}
<div style='width: 300px;height:300px;background: white;'>
<div class='box'>
</div>
</div>
What you're looking for is filter!
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
Maps the shadow around the visible parts of the element, instead of its box.
Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.
You can have a look on this fiddle I have made: https://jsfiddle.net/1fwrn3wh/1/.
The steps you need to do:
Add a :before pseudo element which the same size of :after element
Slightly move :before element downward
Add the filter with blur aspect
Then it will alike the shadow ;)
For your quick editing, you can add this CSS into your file:
.box:before {
content: '';
position: absolute;
top: 105%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid rgba(0, 0, 0, 0.5);
filter: blur(2px);
}
And then change the box-shadow of the original box:
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.50);
Cheer ;)
I have the following image which I am trying to set as an image border (I've added the red just so that you can see it properly — the real version is trimmed with transparent bg)
Dimensions: 363 x 10
I am trying to set it as a border image just for the top border (for the time being):
.panel {
background: #fff;
background: none;
border-radius: 0;
border-width: 10px;
border-style: solid;
border-image: url('../image/marker-white-01-reversed.png');
border-image-slice: 15%;
}
If I set border-image-slice: 15%; the general shape of the top border looks correct (I think), but it looks really blurry:
Can anyone see why this is? Originally I left border-image-slice out but the image was only showing in the corners... and played about with different values but none seemed to give me the correct result
.panel {
background: #fff;
background: none;
border-radius: 0;
border-width: 10px;
border-style: solid;
border-image: url('../image/marker-white-01-reversed.png');
border-image-slice: 15%;
}
Look at your code..
Radius 0 and image slice 15% and solid border..
That is you have to have such an image.
This question already has answers here:
Box with Arrow top and Border
(4 answers)
Closed 8 years ago.
I want to make a curve in a border.. Like that when u click on a google apps button A pop-up window is open here is curve which point to the apps.. how to make this see the image..
Use pseudo elements to produce the triangle.
We can give a border to the triangle by using both the before and after pseudo elements - which act as 2 triangles - an outer one - with a color the same as the border color and an inner one - with a slight offset - with a color the same as the background of the widget.
In the following example, the before pseudo element is the 'outer' triangle and the after pseudo elemnt is the 'inner' triangle.
Markup
<p class="triangle-border">This only needs one HTML element.</p>
CSS
.triangle-border {
position: relative;
background: #fff;
border: 1px solid #c2c2c2;
width: 200px;
padding: 15px;
margin: 20px;
border-radius: 3px;
box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
}
.triangle-border:before {
content:"";
position: absolute;
top: -10px;
left: 46px;
border-width: 0 10px 10px;
border-style: solid;
border-color: #c2c2c2 rgba(0, 0, 0, 0);
display: block;
width: 0;
}
.triangle-border:after {
content:"";
position: absolute;
top: -8px;
left: 47px;
border-width: 0 9px 9px;
border-style: solid;
border-color: #FFF rgba(0, 0, 0, 0);
display: block;
width: 0;
}
FIDDLE
Source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
There are also generators for this like:
http://ilikepixels.co.uk/drop/bubbler/
http://cssarrowplease.com
http://html-generator.weebly.com/css-speech-bubble-generator.html
The usual method is to add before and after pseudo-elements that create CSS shapes using the border property, positioning them absolutely. If you want to fake a 'border' on the shape itself, you create two duplicate shapes (the before and after elements) with different colours, then offset them with the top or left properties.
I want to change the shape of the scroll bar in my page. Right now it is the common rectangle shaped one but i want it to be kind of an oval shape - rounded at both top and bottom of the rectangle.
How Can i achieve this through CSS? Or is this not possible at all.
I am looking for supporting this in IE10.
This is my css for the scroll bar that I have.
.scrollbar-vertical
{
top: 0;
right: 0;
width: 17px;
height: 100%;
overflow-x: hidden;
scrollbar-3dlight-color:#999;
scrollbar-arrow-color:white;
scrollbar-base-color:white;
scrollbar-face-color:#999;
border-radius:5px 5px;
}
Check out this page for a good starting point http://cssdeck.com/labs/css3-webkit-vertical-scrollbars. These only work for browsers that use webkit unfortunately.
To get the rounded oval shape scrollbars you can do something like below:
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
Not tested, you can use a jQuery custom scrollbar as seen on this page: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
I known you can add an outline border with CSS3.
outline: 10px solid red;
Now I was wondering how I can add also a radius to that outline border.
I have tried this one, but doesn't work:
.radius {
padding: 20px 60px;
text-transform: capitalize;
-moz-outline: 10;
outline: 10px solid red;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
Try using CSS-Tricks' Infinite Borders technique and applying border-radius.
This method will require borders and box-shadow and not outline.
img {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3
outline: 5px solid hsl(0, 0%, 60%); */
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
/* If you could do pseudo elements
you could get a few more... */
/* Also, HSL is awesome but don't use it if
you need super old browser support */
}
body { padding: 50px; text-align: center; }
<img src="https://www.randomlists.com/img/animals/chipmunk.jpg">
Firefox has a property -moz-outline-radius, 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.
I realize this doesn't help much, but the answer to your question is: currently, no (not in a cross browser way). In the meantime you should use an alternative approach like the one suggested by thekalaban.
#MichaelYaeger Similar answer to user1685185 but with an updated JSFiddle, use border-radius and box-shadow. This JS Fiddle is shown using a "border" around a circular button (bootstrap), but the same applies an image, etc.