For a website I am currently developing, I run into a very big issue on safari only on mac. My input fields do have borders. I am not talking about the well known border radius issue. But as you can see in the picture below, my input fields get a black border from safari. The border however, does dissapear on focus.
I've have tried lots of things, overwriting all the regular properties in css that an input field will get from safari.
.search-posts-by-name {
-webkit-appearance: none;
border-radius: 0;
width: 400px;
grid-column: 2/3;
grid-row: 2/3;
border-style: none;
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
height: 28px;
background-color: #FAFAFA;
align-self: center;
margin-bottom: 20px;
color: black;
margin-top: 17.5px;
margin-left: 75px;
z-index: 3;
}
input.search-posts-by-name::placeholder {
color: #263238;
opacity: 0.6;
text-align: left;
}
.form-control-email:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #1B5CB0 inset;
-webkit-text-fill-color: white;
background-position: 6px 12px;
}
.form-control-password:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #1B5CB0 inset;
-webkit-text-fill-color: white;
background-position: 6px 12px;
}
<input type="search" name="search-users" placeholder="Search posts by name" class="search-posts-by-name">
Nothing seems to work.
Hope you guys can help me figure out how to fix this.
I am using the most recent version of safari.
UPDATE: the form-control-class clashed with the input and i do not understand why, since is specifically target that class. Does anybody know why and how?
Related
This question already has answers here:
Possible to use border-radius together with a border-image which has a gradient?
(11 answers)
Closed 10 months ago.
HTML
As you can see in this html code I created one class and in that class I gave anchor tag.
Here I gave css to make button but my border-radius css cant not work .
.instagram_button a {
font-weight: 500;
font-size: 20px;
line-height: 19px;
color: white;
padding: 18px 35px;
background: black;
border-radius: 30px;
text-decoration: none;
display: inline-block;
border: 2px solid transparent;
border-image: linear-gradient(to right, #6610f2, #FF6600);
border-image-slice: 1;
}
<div class="instagram_button">
more photos
</div>
I found this online and it looks ok. but the border is not an image, they're actually colors, and the good thing is that you can play with as many colors as you want to make it look as you wish.
I commented all your border styles and posted it under your code, hope this will help :
.instagram_button a {
font-weight: 500;
font-size: 20px;
line-height: 19px;
color: white;
padding: 18px 35px;
background: black;
/* border-radius: 30px; */
text-decoration: none;
display: inline-block;
/* border: 2px solid transparent; */
/* border-image: linear-gradient(to right, #6610f2, #FF6600); */
/* border-image-slice: 1; */
border:3px solid #0000;
border-radius:30px;
background:
linear-gradient(black,black) padding-box,
linear-gradient(blue,red,orange,green) border-box;
}
#map-search-button {
display: inline;
float: right;
border-style: solid;
border-image: url(https://i.imgur.com/r35pKjB.png) 8 8 8 8;
border-width: 5px 5px 5px 5px;
height: 50px;
width: 125px;
background-color: #00ACC8;
background-clip: padding-box !important;
font-size: 1.5em;
text-align: center;
line-height: 40px;
color: white;
}
<div id="map-search-button">Find us!</div>
On Chrome on Windows, the button looks the way I expected:
But on Chrome on a Mac, the button looks like this:
Why is this? Is there anything in the CSS I can change that would keep the border image solid?
I’d highly recommend creating a rounded button with border-radius rather than trying to implement a border-image. See inline example below.
As for a technical explanation of why yours doesn’t look right, you may want to look into best practices for producing a border-image if you want to further pursue that route. Your Mac may have a Retina display and be improperly scaling your image.
Using border-radius:
body {
font-family: impact, sans-serif;
letter-spacing: .02em;
}
#map-search-button {
width: 125px;
height: 50px;
line-height: 50px;
background-color: #00ACC8;
border: 5px solid #00ACC8;
border-radius: 8px;
font-size: 1.5em;
text-align: center;
color: white;
}
<div id="map-search-button">FIND US!</div>
I was trying to create a circle with i icon in it for with CSS. However, when page is first rendered the circle looks like an inverted egg and covers the border around it slightly. (Zoom in the browser to see issue in more details)
The tricky part is, if you open Dev Tools and change any value related to it's position(width, height, whatever), everything will snap back to normal and it will become a circle.
https://jsfiddle.net/2yjashje/
<div class="round-egg">
i
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 10px;
cursor: help;
border-bottom: none !important;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
}
What is going on here?
I put the letter "i" in its own span and increased the margin from top to vertically centre it. As for the circle, I modified the border-radius property, and then removed the border-bottom: none; property as well. Assuming you want a circle, you need the bottom border.
https://jsfiddle.net/2yjashje/3/
<div class="round-egg">
<span class="icon">i</span>
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 30px;
cursor: help;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
display: table-cell;
}
.icon {
display: block;
margin-top: 2px;
}
I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/
i have a weird bug on this page when browsing with IE
http://www.emfx.fr/?page_id=38
this image explain clearly the problem :
http://appartager.free.fr/site/bugIE.jpg
when i look at this page localy(easyPHP) with IE everything is OK
when i look at this page online with IE i have 2 problem
1) my hr tag don't align to center
2) the button send message is crop
BUT the code is exactly the same and the Browser is the same (IE)
the hr behavior is control in a css file
hr.center {
border: none;
color: #353a40;
background-color: #353a40;
height: 1px;
width: 371px;
text-align: center;
}
the button is also control by 2 css file (All Browser/IE exception)
here is the general code :
#contact_form input[type=submit] {
padding: 7px 15px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-family: "Droid Sans", Arial;
cursor: pointer;
border: 1px solid #666;
color: #ccc;
margin-bottom: 10px;
margin-left: 420px;
}
here is the ie exception
#contact_form input[type=submit] {
padding: 8px 0px;
background: rgba(255,255,255,0.1);
margin-bottom: 300px;
margin-left: 418px;
text-align: center;
}
if you guys have any idea on how to solve this it would be great !
cheers !
sk
You've removed the horizontal padding from the button in IE
#contact_form input[type=submit] {
padding: 8px 0px; /* 15px?*/
and I'd personally center a hr using margin:auto instead of using text-align - but hr is aligned to the center by default; so you shouldn't need to adjust this.
(Taking those declarations out in IE web developer tools appears to resolve the problem).