Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Been searching all over and can't seem to find the answer to this:
I have a checkbox that disables several forms if unchecked. The forms are styled to change color, but the placeholder text remains the same. How can I fix this?
(alternatively, I wouldn't mind even just removing all placeholder text)
Thanks!
You can style placeholder pseudo-elements in css, so you could write the following css:
input:disabled::-webkit-input-placeholder { /* WebKit browsers */
color: #fff;
}
input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff;
}
input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff;
}
input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #fff;
}
assuming that white is also inputs background.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Here is another unexpected outcome of a CSS rule. (Yesterday I posted this that was not understood here: How to I avoid that the CSS rule * {} trump .a .b {}?)
For historical reasons I have these CSS rules:
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
The last rule shows up in Chrome on a P element. The computed value of --baseFontSize on that element is " 16px". The "Computed Style" shows that the last rule used is the rule above.
But. The value is "20.8px".
What is going on?
If we create a html document with your variables it can be seen that the value is indeed 16px as expected. So there are no 20.8px anywhere.
Maybe you zoomed in on browser? Set a different font-size on your OS?
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
<p> Here be text </p>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Take a look at the following page:
https://www.wholesaleledlights.co.uk/dimmable-b22-6w-omni-led-clear-globe.html
The large product specification table displays perfectly well in firefox and ie, but is missing it's top border when I view it in chrome.
I'd be very interested to know why..
table {
/* border-collapse: collapse; */
border-spacing: 0;
}
change the style of table in style.css line no 788
Not sure why this should happen if you're using the -webkit- prefix in your
<table class="data-table"....>
But a quick fix would be to add a border-bottom: 1px solid #c0c0c0 attribute to your H2 titled Specification Table
Tried in Firefox, worked great.
Hope this helps,
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
beautiful people,
For the life of me I can't get my buttons to format properly in IE and Firefox, using Bootstrap. I've looked around for people with similar problems on here but I can't seem to lick this one. Any help would be greatly appreciated. I've made this site in MeteorJS in case that provides any insight for you out there:
http://jdd.meteor.com/search
*It works fine in Chrome, Safari, iOS devices...
I've made a reduced version of your form. My method for solving this problem is using the enforced line-height of firefox as your basis for applying styles. The default is normal from what I remember.
So using that you don't have to set a height and line-height to match that, this for me has been the most consistent solution cross browser without any weirdness.
I use the prefixed appearance rules as that removes all default browser styling applied to that element. It's especially needed in Mobile Safari.
http://codepen.io/stevemckinney/pen/CLgdE
input {
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: #EFEFEF;
}
input,
.btn {
line-height: normal;
padding: 10px;
}
.btn {
text-decoration: none;
}
.btn-primary {
background: #820024;
color: white;
}
Hopefully this helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Below is small code snap. Though I have given color there it does not show. Underline and position is ok.
h5 {
margin-left: 36%;
color:#C0C0C0;
text-decoration:underline;
}
If you use the web inspector tools in Chrome you will most likely see a more specific style that overrides your style.
For example:
body > h2 {
color: green;
}
h2 {
color: red;
}
A JSBin to demonstrate
Is how Chrome Tools would show it.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I've managed to get this working correctly in IE (annoying), but the solutions I manage to get working cause some odd issues in Chrome and Firefox. I can't seem to get a set height/padding that works across all the browsers for the handle.
http://plnkr.co/edit/xqYBnz5BHLP844kXJXKs?p=preview
The height of the red, green and gray boxes should all be the same. Right now they are in IE, but not in Chrome/Firefox.
The problem is arising from several inconsistencies between the attributes of the red/green boxes compared to the gray.
I've been able to make the gray box the same height by changing the following attributes:
.stSlide > .stHandle { /* Gray box container */
padding: 4px 1px; /* old style: padding: 1px 1px 3px 0; */
font-size: 11px; /* old style: font-size: 12px; */
line-height: 18px; /* old style: line-height: 22px; */
}