The following is my CSS code for a form's submit button:
.submit {
-webkit-appearance: none !important;
text-align: center !important;
border-radius: 0rem;
color: rgb(63, 42, 86);
display: inline-block;
float: right;
border: none;
font-size: 14px;
border-left: 0.05rem solid rgb(63, 42, 86);
width: 3.6rem;
height: 2.2rem;
line-height: 1.75rem;
transition: background-color 0.2s;
background-color: transparent;
}
After some initial formatting issues on iOS, I implemented -webkit-appearance: none which fixed most of the problems. But the "Submit" text for the Submit button is now right-aligned instead of centered on iOS, as shown in this image: http://ben-werner.com/screenshot/01.png
On the desktop version using chrome and safari however, the text displays centered as it should: http://ben-werner.com/screenshot/02.png
I don't think it is a specificity issue, as the !important declaration of text-align: center should prevent anything else in my CSS overriding it.
Does anyone have an idea what is happening on the iOS device that causes the Submit text to function differently? Any help is much appreciated, thanks!
CodePen Link: https://codepen.io/benwerner01/pen/BqErOE (Note: the html formats correctly on the CodePen site, but the same code running within safari or chrome on iOS breaks the button. I have hosted the code from CodePen at https://ben-werner.com , to demonstrate that on mobile it displays incorrectly)
Ok, I know what is happening now. You are giving your submit button a specific width and height that is affecting the text-align on iOS devices. Removed the width and height values and your text will align center on iOS devices. I would also use padding to give your button the desired width and height instead of those properties.
.submit#mc-embedded-subscribe {
border-radius: 0 !important;
-webkit-appearance: none !important;
color: rgb(63, 42, 86);
float: right;
border: none;
font-size: 14px;
border-left: 0.05rem solid rgb(63, 42, 86);
/* width: 3.6rem;
height: 2.2rem; */
text-align: center !important;
text-align: -moz-center !important;
text-align: -webkit-center !important;
line-height: 1.75rem;
transition: background-color 0.2s;
background-color: transparent;
margin: 0 auto;
}
Related
It works in Chrome desktop
But not Safari iOS
Here is the the CSS
.button {
border: 1px outset $color3;
background: $color1;
color: $color4;
font-size: 80%; // A little smaller because it's in uppercase
text-transform: uppercase;
display: inline;
margin-left: 5px;
margin-right: 5px;
}
I tried font-size: smaller, 0.8em, etc, but it did not help. 50% or 0.5em looks good on iPhone, but is too small on the desktop. text-transform did not matter. padding: 1px; did not help.
Change display to inline-block, and add padding to the top
I was trying to make a simple help button using "A" anchor tag. The thing is it works perfectly on Firefox, Chrome, OP, Safari. Now when I tried it on Internet Explorer 10, The text wasn't properly aligned in the middle. here is what I've done so far:
HTML
<a id="help-btn"><span>?</span></a>
CSS
#help-btn {
display: table;
margin-left: auto;
margin-right: auto;
border: solid 5px #2F2F2F;
width: 10em;
height: 10em;
text-align:center;
background: #c100ff;
text-decoration: none;
vertical-align: middle;
}
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 100%;
}
here is a jsfiddle sample. any help would be appreciated...
so I've finally found the solution after 3 hours of digging deep, as stupid as may it sounds but the extra space was being added by the font "bauhaus 93". It renders correctly on all browsers except IE (that's a shocker). So I had to change it to another font and now it works perfectly. so if anyone face the same problem please do check the font that you are using.
play with your line-height.
Try this :
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 10em; // CHANGE YOUR LINE-HEIGHT SIZE
}
if the problem not fixed, try add display:block; to your #help-btn span
You need to add the line-height attribute and that attribute must match the height of the div. In your case:
Try
#help-btn span {
color: #22002D;
font: 3em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
height: 3em;
line-height: 3em;
}
in internet explorer 10 (mobile version), a selectbox () gets highlighted blue as soon as it gets focused, (it´s the blue of the whole Modern UI surface of the phone). the styles for the select tag:
border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 25px;
letter-spacing: -1px;
float: left;
font-weight: 400;
padding: 0 5px 0 5px;
-webkit-appearance: none;
-ms-user-select: none;
background-origin: content-box, content-box;
background-repeat: no-repeat, repeat;
background-size: 11px 6px, 1px 160px;
background-position: right center, 0 -1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMAQMAAACz9bS7AAAABlBMV…vQuZgJjsYojkBJQf75i4cGzcXt5HJQ/Djs7L5sApGeVNPJDzbGEbOb/85rAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAlgCAIAAADGR8ryAAACZ0lEQ…tDzV5P+JnOAzg9qR2Xlg+a8jAvtyK/P5fSI6Sf3c3NhwADAJ0Rj8qbukvYAAAAAElFTkSuQmCC);
border: 1px solid #CCCCCC;
I was hoping the "-ms-user-select: none" would fix it, but didnt.. Has anyone experience similar?
I've encountered a similar problem on WP7 an WP8, the solution is to move focus from select box to fake input on click event.
jQuery:
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
CSS:
.fakeInput {
display: block;
width:0;
height:0;
top: -999rem;
position: absolute;
}
Note: do not forget to add this code only for mobile device, on desktop browsers it will work not as expected.
IE has its own CSS pseudo-element to deal with this highlight.
CSS:
select::-ms-value{ background-color: transparent; color: black; }
You may read more about this on this page.
it´s interesting but since I add this line to my style sheet, it keeps highlighting blue, but doesn´t stay that way after you select something from the selectbox.
Thought I add it as an answer if somebody comes back with the issue.
:focus{outline: none;}
I've been checking/using Twitter Bootstrap for quite a while now. I like what they've done, but more than that, I like understanding what I do.
After inspecting the dropdown arrow with Chrome's inspector, it seems it is in fact a ↓ html entity. I've been trying to reproduce this but with no success. I'm getting an ugly arrow and not the simple triangle.
What are the minimum CSS properties to use in order to reproduce it?
PS: A link to a jsFiddle trying to reproduce it.
Here's a working example.
You don't need the extra ↓ in your HTML and the border-color was white, making it invisible on a white background to your very human eyes.
First avoid default browser styles. Then use your own. As an example:
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 60px;
border: 1px solid #ccc;
padding: 0 0 0 20px;
font-size: 18px;
font-weight: 300;
border-radius: 0;
color: #999;
letter-spacing: 1px;
background: url("../img/arrow#2x.png") calc(100% - 10px) 24px #fff no-repeat;
cursor: pointer;
}
I have page with dark background. In IE, Firefox, Chrome and Safari my checkboxes looks like this:
But Opera displays checkboxes like this:
So user cannot see if he checked the checkbox, because the tick (check-mark) is black as well.
Here is part of my css:
body {
background-attachment: fixed;
background-color: #07080A;
background-image: url('images/bg.jpg');
background-position: center top;
background-repeat: no-repeat;
border: 0 none;
color: #FFFFFF;
display: block;
font-family: Arial;
font-size: 13px;
margin: auto auto;
width: 1000px;
}
input, textarea {
width: 300px;
color: #fff;
background-color: #323232;
border: none;
font-size: 13px;
font-family: Arial;
padding: 8px 0px 8px 10px;
}
input[type="checkbox"]{
background: transparent;
width: 30px;
}
How can I change that? I would like to have appearance of checkbox the same in Opera and other browsers.
Try to override your first style using:
input[type="checkbox"] {
background: inherit;
width: 30px;
}
This will give the checkbox the background of its parent. Depending on the order of your rules and other rules, you might need to use inherit !important.
In Opera, the background property applies to the background inside the checkbox not the background outside of the checkbox. I believe what you're trying to fix is some of the issues that you can find on this page about how checkboxes are styled.
input[type="checkbox"]{
backgorund: #fff;
width: 30px;
}
Does that not work for you?
First, you have a typo in your input[type="checkbox"] line.
Second, according to this you could explicitly set the checkbox background to be white. This works in Opera.