<input type="submit" data-id="TaskStatus" class="PlayPause" id="TaskStatus" onclick="PauseChange();" value="โธ" >
how can I remove the colour from this emoji so that the CSS can allow it to blend in with the rest of the button? it already has CSS applied to it, but that changes the colour when it's clicked, but I'd want it to be the colour chosen in the CSS by default. I've tried to directly style the input but that doesn't seem to work.
You can apply filter: grayscale(100%) to make the emote black and white:
input {
filter: grayscale(100%);
}
<input type="submit" data-id="TaskStatus" class="PlayPause" id="TaskStatus" onclick="PauseChange();" value="๐">
.PlayPause {
filter: grayscale(100%)!important;
}
<input type="submit" data-id="TaskStatus" class="PlayPause" id="TaskStatus" onclick="PauseChange();" value="๐">
Adding to the answer given by Spectric if custom CSS is not getting applied, then you just need to add '!important' keyword at the end of CSS value, to give higher preference to your custom CSS.
Related
I would like to change opacity of image only when it is in disabled state like i'm doing for input button below:
input[type="button"]:disabled {
border: 1px solid #AAA;
border-radius: 4px;
opacity:0.5;
}
img:disabled {
opacity:0.5;
}
Normal button: <input type="button" value="Close" /><br>
Disabled button: <input type="button" value="Cancel" disabled="true"/>
<br><br>
Normal: <img src="http://i.stack.imgur.com/AkfB4.png" /><br>
Disabled: <img src="http://i.stack.imgur.com/AkfB4.png" style="opacity:0.5" disbled />
But it's not working for images, if I add :disabled in css. Please help me to get this.
As stated by W3C:
An element is said to be actually disabled if it falls into one of the
following categories:
button elements that are disabled
input elements that are disabled
select elements that are disabled
textarea elements that are disabled
optgroup elements that have a disabled attribute
option elements that are disabled
fieldset elements that have a disabled attribute
Note: This definition is used to determine what elements can be focused and which elements match the :disabled pseudo-class.
So, you should not use :disabled for images. You should to find some other way.
The best possibility should be to use an input tag with the type attribute image.
This way to can make use of the disabled attribute:
input[type=image]:disabled
{
opacity:0.5;
}
<input type="image"
src="http://i.stack.imgur.com/AkfB4.png"
border="0" disabled />
If you don't want the a form to submit when you click it, you should add onclick="return false;" to the input tag.
Another possibility as mentioned by #DevonBernard is to add a class disabled, and use CSS to get the opacity right.
img.disabled
{
opacity:0.5;
}
<img src="http://i.stack.imgur.com/AkfB4.png"
alt="Image" class="disabled">
If you do want to use the disabled attribute (even though you shouldn't) , another possibility is to use the attribute selector by using:
img[disabled]
{
opacity:0.5;
}
<img src="http://i.stack.imgur.com/AkfB4.png"
alt="Image" disabled>
This is not the correct way, since the disabled attribute should not be used on images in the first place. Also some browsers might not support this (now or in the future).
CSS3 :disabled selector is usually used on form elements (checkboxes, buttons, etc), so if you want to apply opacity on img, you should use:
img.disabled
{
opacity:0.5;
}
So it is about the CSS class. I don't think I have an idea what could "disable state" on image mean actually, perhaps only an image state after you clicked it, but even in that case you can't go with "disabled" selector.
You can also use the CSS selector for "disabled" state, which works fine in my case:
button[disabled] > img {
opacity: 0.5;
}
Best
Manuel
I am trying to use Font Awesome icons in the input placeholder.
I tried this but not working.
<body>
<input type="text" placeholder="๏" style="font-family:FontAwesome"/>
</body>
Whatโs wrong with this? I am getting some weird number in the placeholder instead of icon.
You can add font awesome icon as like that
<input type="text" placeholder="" style="font-family:Arial, FontAwesome" />
you can also check out the fiddle Fiddle click here
You can also use an icon outside of placeholder, placed with HTML. Here is my solution:
HTML
<i class="fas fa-search form__icon"></i>
<input type="text" name="search" class="form__input" placeholder=" Search">
CSS
.form__icon {
position: absolute;
pointer-events: none;
z-index: 2;
}
.form__input {
position: relative;
z-index: 3;
}
.form__input:placeholder-shown {
z-index: 1;
}
It's a bit complex, but it also give a possibility to use animated, rotated and flipped icons.
Check my CodePen: https://codepen.io/dzakh/pen/YzKqJvy
When you try to use a font icon and what you get is some weird character, this is probably due to the fact that the browser tries to render that icon with a wrong font. Check what your input's font-family is when rendered by inspecting the element, and then going into the 'Computed' tab (Chrome: Right click -> Inspect Element -> Computed). If it's not font-awesome, but you think you set it, try to use font-family: FontAwesome !important;. This will override any of the possible input's parrent font-family setting.
Well, I'm tryin' to change the colour of a placeholder when hovering...
CSS
#principal form label textarea::-webkit-textarea-placeholder:hover {
color:#2278CE;
}
HTML
<textarea cols="93" rows="15" maxlength="1000" placeholder="Write here."></textarea>
I need to know if it's right, if it isn't, how to do.
The only change is the position of the :hover. You have to use the :hover pseudo element prior to ::-webkit-input-placeholder. Try this:
textarea:hover::-webkit-input-placeholder
{
color:#2278CE;
}
Can we add space between the browse button and textbox for input type file ?Is that possible? Aslo can i add border color for the same textbox ?
thanks,
michaeld
Increasing spacing is not possible. Generally speaking, styling an input type="file" is extremely difficult. If you check cross-browser, you can see that different browsers render it differently. The only way to style it is to fake another element as input type="file"
Example: http://www.quirksmode.org/dom/inputfile.html
You should use css to do this:
Your html:
<input type="text" class="yourclass" name="yourname" />
<input type="submit" />
your css:
<style> input.yourclass { border:1px solid red; margin-right: 10px;} </style>
Hope this puts you in the right direction
It is working for me in Chrome.
input.file {
text-indent: initial;
}
How to change background color of readonly textbox in css
There are too many unkowns in your question. Which browser do you want support? If you say textbox you seem to use ASP.NET, but there is no tag at you question.
Generally said, the behaviour between the browsers are different.
Consider the following html
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="This is a test" style="background-color:Black; color:Lime;" />
</body>
</html>
IE8 renders the background color properly, but disabled controls will always have gray text with shadows. Mozille Firefox beside that renders the control correct and i am sure there will be difference all over the different browsers and even between the browser versions (IE6 would interprete the color values correctly too).
If you want to have a html regardless which browser you use, you have to use a span or other inline element, to format it with border and colors you want, instead of using a input element.
You could use
input[disabled="disabled"] { background:url("url-to-background-image.jpg") no-repeat #fff; }
and for older browser that doesnt support this selector, you can use jQuery to apply a class
$(document).ready(function() {
$("input[disabled="disabled"]").addClass('disabled');
});
And unless it's disabled all the time, you should provide js for removing the class along with js for enabling it.
you can try this
input:-moz-read-only { /* For Firefox */
background-color: yellow;
}
input:read-only {
background-color: yellow;
}
Hi This will surely work for your code. Just try this..
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="JavaScript is the best" style="background-color:Black; color:green;" />
</body>
You can change the background color in css using this code but before that make sure your html page is linked with your css page.
Body {
Background-color: red;
}
Hope this code will work for you.