Styled Input

fiddle.css

.onyx-button {
    background-color: cyan;
}

.myapp .onyx-input {
    background-color: tomato;
}

fiddle.js

enyo.ready(function() {
    enyo.kind({
        name: 'ControlSample',
        classes: 'myapp',
        components: [
            { kind: 'onyx.Button', content: 'Click', ontap: 'tapped' },
            { tag: 'br'},
            { kind: 'onyx.Checkbox', checked: true, onchange: 'changed' },
            { tag: 'br'},
            { kind: 'onyx.InputDecorator', components: [
                { kind: 'onyx.Input', placeholder: 'Enter something',
                  onchange: 'changed' }
            ]},
            { tag: 'br'},
            { kind: 'onyx.InputDecorator', components: [
                { kind: 'onyx.RichText', value: '<i>Italics</i>',
                  onchange: 'changed' }
            ]}
        ],
        tapped: function(sender, event) {
            // React to taps
        },
        changed: function(sender, event) {
            // React to changes
        }
    });

    new enyo.Application({name: 'app', view: 'ControlSample'});
});

fiddle.manifest

name: Styled Input
description: Shows how to make a CSS selector more specific
authors:
  - Roy Sutton
normalize_css: no