Overriding disabled input and textarea with CSS - css

Im trying to override the grey text of a disabled input and textarea. At the moment Im only really concerned with it working in Webkit and Mozilla. At the moment Im currently using every trick in the book that I know of:
input[#disabled=true], input[#disabled],
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled],input[disabled="disabled"], input[disabled] {
color: black !important;
}
Sure it does change the colour if I change it to something else, however when I choose black it is still greyed out a bit.
Any ideas? I am using Ext JS if I can use that to manipulate it. Thanks.

input.button-control[disabled]
{
color: #cccccc !important;
}
Here button-control is a class on the input element, whose text is overriden to grey when the disabled attribute is set.
I hope this helps.

I would prefer to go the JavaScript way to achieve best browser compatibility. I would use the ExtJS [http://www.extjs.com/deploy/ext-1.1.1/docs/output/Ext.DomQuery.html][DomQuery] and insert the CSS rules by adding specific class or directly injecting them as style attribute values.

Related

Wordpress changing element.style with CSS

I want to change the color of the social icons (on the left side of the screenshot). Since I have no clue how to change it in WordPress, I tried it with CSS. But now I noticed that I have to change the element. style and I don't know how... I tried just changing the color in the element. style and copying into the additional CSS in WordPress, but it doesn't work. On the screenshot, you can see what I mean. Is there a solution to this problem?
This is what I tried:
element.style {
--wpz-social-icons-block-item-color: #FF0000;
--wpz-social-icons-block-item-color-hover: #FF0000;
}
Please try with this following code in wordpress customizer > Additional CSS
.social-icon-link{
--wpz-social-icons-block-item-color: black !important;
--wpz-social-icons-block-item-color-hover:
red !important;
}
I think that what makes color is the element inside a <span class="social-icon socicon socicon-icon-instagram">
But anyway you are trying to change something via style, and if you want to do like this you´ll hace to use something like
style="background-color:#000"
or wathever, color, font-size etc
But in this case I will use a new style, like
.socicon-icon-instagram {color:#000;}
And maybe depends of the template you´ll need to add !important to CSS class to get the color...like this
.socicon-icon-instagram {color:#000!important;}
It is not a good practice but sometimes is necesary

How to style Polymer dropdown menu arrow

New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.

Change background of Input

I start from this default theme (blucristal)
https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.InputAssisted/preview
Now I want change the background of the editable input from white to (for example) yellow. How Can I do?
I would like use Ui theme designer but I can't find the correct property to change
Any visual customization of standard controls can be done with help of CSS.
Redefine property of standard class
.sapMInputBaseInner{
background-color: yellow !important;
};
It will change background color for every intup. Or you can create your own CSS class
.UserClass .sapMInputBaseInner{
background-color: yellow !important;
};
And using method addStyleClass() add "UserClass" only to specific elements.
You may use CSS pseudo class for this purpose. Like this
form input[type=text]:focus{
background-color:red;
}
It will change the background-color of textbox from white to red whenever you click on it.
Here is the example http://jsfiddle.net/e284q9fv/

Override user agent (Chrome) default styles inside GWT

i've a TabBar that after the last Chrome upgrade (32.0.1700.76 m) is displayed with an outline on focused tabs:
In past version there wasn't. To restore old view i tried to set some outline in CSS, like this:
.gwt-TabBar .gwt-TabBarItem:focus {
outline: lime auto 5px !important;
}
(lime is just for see if it works).
Even this edit, the computed style still remains the default (-webkit-focus-ring-color auto 5px;
):
What should i do to override this user agent style?
EDIT
I think the blue outline is not of the HTML (div):
The one i want to put away is on the TabBar Item object:
I honestly don't know why the Churro solution worked before :(
I tried the following CSS to highlight the textarea on this Stackoverflow page, and it worked:
.wmd-input:focus {
outline: lime auto 5px !important;
}
Make sure your selector in front of :focus is correct.
EDIT
I took a look at a TabPanel in my own GWT app. The element that gets a blue ring around it in a TabBarItem is the Label (div) containing the tab's text, not the gwt-TabBarItem.
Try this selector: .gwt-TabBar .gwt-TabBarItem-selected .gwt-Label:focus

How to override active admin CSS?

I am using Active Admin, is there a way to override CSS used by the active admin theme?
For eg:- I have to change css of submit button which is disabled to cursor: wait; and make it unclickable.
What's the best way to do this?
just make a new file
app/assets/stylesheets/active_admin.css.scss
and put your scss code there.
(Or just active_admin.css with css code)
You can override any CSS property by overriding the CSS class or IDs in you own stylesheet with !important attribute if you do not have any access to the original stylesheet
For example, use
.submit-button {
color: white !important;
}
to change the color of the submit button text.
It is easy to change the styles in Rails 4. Go to
app/assets/stylesheets/active_admin.css.scss
OR (depending upon where you have kept the file)
vendor/assets/stylesheets/active_admin.css.scss
and add styles in there.
I put my form classes in a container class to create a more specific reference. Like..
.form-container {
font-family: 'open-sans';
width: 420px;
.text-field-class {
input{border:none; border-bottom: 1px;}
}
}
this is working so far... for the most part. Better than important. Though maybe using an ID would be the more appropriate way.

Resources