In the cart page of my website the radio button are shown badly in Chrome. If firefox looks just fine. I need Chrome to show them as Firefox does.
I tried this (but not working):
input, textarea, button {
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
resize: none;
}
input[type="radio"]{
-webkit-appearance: radio;
}
You can add a product and view the cart page here.
Take a look at the capture to see what I mean.
Generally you don't want to place pseudo classes onto an input but onto the label themselves. Nonetheless, I noticed that you have a display inline here:
input[type='checkbox'],
input[type='radio'] {
display: inline;
margin-right: 10px;
font-size: 16px;
}
try changing that to inline-block.
Related
I'm trying to hack a search box into a wordpress mobile nav menu and I have no idea why I can't type into it. I'm guessing the issue is related to the cursor but can't find more info on how to fix it and I seem to have reached the limits of my abilities!
Thanks for your guidance :)
Edit (forgot the link): https://www.winebounty.com (mobile version)
Based on the link, my assumption was incorrect. You are able to type into it, and it's not being blocked by another element. The issue is with the font size, it's set to 0px. I found this out by opening up Chrome Dev Tools, and clicking on Computed that shows all styles that are applied to that element.
In your style.css you have the following on line 48999:
input, button, select, textarea {
font-family: inherit;
font-size: inherit; /* <-- Culprit */
line-height: inherit;
}
It's inheriting the font-size from line 13922:
#mega_main_menu, #mega_main_menu>.menu_holder,
#mega_main_menu>.menu_holder>.menu_inner,
#mega_main_menu>.menu_holder>.menu_inner>.mega_main_menu_ul {
font-size: 0; /* <-- This guy */
letter-spacing: 0;
word-spacing: 0;
line-height: 0;
display: block;
visibility: visible;
overflow: visible;
-webkit-backface-visibility: hidden;
}
You just need to add an appropriate font-size to that search input, and it will work, as seen here:
I have an email contact form, with a submit button, and some basic styling on the button. All of the styles work on Desktop, and most of the styles are applied on mobile, just not the padding or border-radius. I already tried switching to EM units instead of pixels. The url is http://sharperprogrammer.com/contact (not self-promoting, just thought it would help to see the full thing)
HTML:
<input type="submit">
CSS:
input[type=submit] {
background-color: #4CAF50;
color: white;
/* padding: 12px 20px; */
padding: 1.2em 2em;
border: none;
border-radius: 0.4em;
cursor: pointer;
margin: 10px;
}
I have even connected my iPhone to my Mac and opened the Safari Developer Tools, and I can check and uncheck to toggle different styles on the button, but the padding seems to do nothing. It's weird to me because the other styles like the background-color work fine, so I know everything is connected at least. Thanks for taking a look!
Edit: The style is just fine on an Android phone's Chrome browser, but the styling isn't applied correctly on my iPhone's Chrome or Safari browser. And I've cleared my browser cache just in case.
Here is a screenshot:
It looks to me like Safari / Chrome Mobile have some default button styles that are more specific than input [type=submit]. Perhaps the more specific styles don't specify background-color which is why yours is working.
I found two solutions, which I will link below, that both vouch for adding -webkit-appearance: none; as a solution.
CSS submit button weird rendering on iPad/iPhone
Why is my button style changing when on laptop and mobile
Hopefully this will work for you :)
Try to add this:
in the navbar.css file inside media query :
#media only screen and (max-width: 600px) {
.navbar{
flex-direction: column;
align-items: center;
}
}
I'm scratching my head on this one... I have a generic WooCommerce checkout form being displayed in the attached screenshot. Everything is fine, except for the checkbox to accept the terms & conditions. It has a zero width. In the screenshot, I've applied a border so you can see the field onscreen. It has "visibilty: visible" and "display: inline". I've tried setting width and min-width with no success. This has to be a simple problem staring me right in the face, but for the life of me I'm not seeing the problem.
Since you're using a WP theme, it may have some CSS out of your control? Thinking the theme is hiding default checkboxes to display custom ones. Try searching to see if anything like this exists in your reset.css:
select, input, textarea {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
}
Note the appearance tags. If so, that means that regular <input type="checkboxes"> wont display properly. I would override it with one of the classes you have on it, or comment it out.
Something like:
.input-checkbox{
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
-o-appearance: checkbox !important;
-ms-appearance: checkbox !important;
appearance: checkbox !important;
}
I have a checkbox styled like so:
input[type="checkbox"] {
position:relative;
top:0.5em;
-webkit-appearance: none;
height: 1.25em;
width: 1.25em;
margin-right: 5px;
vertical-align: top;
}
input {
margin:0 0 0.2em 0;
border-radius:0.1em;
border:1px solid #d2d2d2;
padding:0.8em;
box-sizing:border-box;
font-size:16px;
color:black;
}
input[type="checkbox"]:checked::before{
content: "\f00c";
font-family:"FontAwesome";
position: absolute;
font-size: 1em;
left: 0.15em;
top:0.3em;
text-align: center;
width: 1.25em;
color: #678b4f;
}
Jsfiddle here.
It appears nicely in most browsers and until now, it seems to at least fall back to something useable in more awkward browsers that ignore -webkit-appearance.
However, in Edge, the checked version of the checkbox appears as a very small dot (rather than font awesome tick) that is barely visible. If I remove -webkit-appearance, that displays something useable but that then breaks it in the webkit browsers.
Anyone know how I can fix/get around this?
It is actually not a dot, its a super teeny tiny checkbox, because of the padding on the input. If you change it from 0.8em to 0.1em, you will see what i mean.
Moving the padding from the input element to the input[type="checkbox"]:checked::before selector it will work in all browsers the same.
The problem is that Edge actually supports -webkit properties, but the behavior of -webkit-appearance is unexpected (probably a bug). It seems that adding this property allows you to style the checkbox to a certain degree, but the original checkbox is rendered nonetheless. Interestingly despite setting the value to none the DOM inspector shows that it remains checkbox:
Microsoft's documentation says the following about -webkit-appearance: none:
Default. The appearance of an element is not changed.
Note that it says "not changed" when you would expect "not rendered". The docs seem to be about IE, so I'm not sure if it's relevant for Edge as well or at all.
One possible workaround is a hack, that only targets Webkit browsers. Add the selector body:not(*:root) before the actual selector:
body:not(*:root) input[type="checkbox"] {
You can try this
#supports (-ms-ime-align: auto) {
input[type="checkbox"] {
width:51px;height:51px;
}
input[type=checkbox]::-ms-check{
color:red;
border:0;
background:rgba(0,0,0,0);
}
}
This is for IE Edge #supports (-ms-ime-align: auto)
This is for checkbox when checked input[type=checkbox]::-ms-check
my asp buttons are getting blurred after disabling them through code in Internet Explorer.on mozilla it is working fine.
Css applied to buttons are
.Login-btn{
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-image: url('../images/Login-btn.jpg');
background-repeat: repeat-x;
padding-right: 20px;
padding-left: 20px;
display: block;
width: auto;
float: left;
text-decoration: none;
margin-left: 10px;
}
Login-btn.jpg is blank image on which i am writing text.what can be the problem
Well, IE gives a disabled effect to html buttons ignoring whatever CSS that you may have. So there are no real solutions but few work-arounds:
Instead of disabling button, add a onclick handler that would return false (but button will still remain click-able).
Create your own custom button implementations that rely on hyper-links
You should create a separate style selector for disabled buttons, something like this should work across most browsers, even IE (7+):
.Login-btn[disabled="disabled"], .Login-btn.disabled{
}
see: this link