Semantic-ui: [Form / Input] Add Success State for Input, Form Validation

Created on 15 Jun 2015  路  9Comments  路  Source: Semantic-Org/Semantic-UI

Success state is important. Please let it be avaliable in Form.

<div class="ui form">
    <div class="field success">
        <label>Username</label>
        <input placeholder="Username" type="text">
    </div>
</div>
Enhancement

Most helpful comment

Now, I can't find this in Semantic-UI 2.
I've tried to create custom success state.

Success State

.ui.form .field.success label {
    color: #308330;
}
.ui.form .field.success input {
    background: #f4faf4 none repeat scroll 0 0;
    border-color: #a3c293;
    border-radius: 0.285714rem;
    box-shadow: none;
    color: #308330;
}
/* Success Placeholder */
.ui.form .success ::-webkit-input-placeholder {
    color: #5e9e5e;
}
.ui.form .success ::-ms-input-placeholder {
    color: #5e9e5e;
}
.ui.form .success ::-moz-placeholder {
    color: #5e9e5e;
}
.ui.form .success :focus::-webkit-input-placeholder {
    color: #558e55;
}
.ui.form .success :focus::-ms-input-placeholder {
    color: #558e55;
}
.ui.form .success :focus::-moz-placeholder {
    color: #558e55;
}

All 9 comments

There's an undocumented success state on form. Which will show success message in form, but there is no input styles for success.

I've added this as an enhancement.

Now, I can't find this in Semantic-UI 2.
I've tried to create custom success state.

Success State

.ui.form .field.success label {
    color: #308330;
}
.ui.form .field.success input {
    background: #f4faf4 none repeat scroll 0 0;
    border-color: #a3c293;
    border-radius: 0.285714rem;
    box-shadow: none;
    color: #308330;
}
/* Success Placeholder */
.ui.form .success ::-webkit-input-placeholder {
    color: #5e9e5e;
}
.ui.form .success ::-ms-input-placeholder {
    color: #5e9e5e;
}
.ui.form .success ::-moz-placeholder {
    color: #5e9e5e;
}
.ui.form .success :focus::-webkit-input-placeholder {
    color: #558e55;
}
.ui.form .success :focus::-ms-input-placeholder {
    color: #558e55;
}
.ui.form .success :focus::-moz-placeholder {
    color: #558e55;
}

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

Oh stale! Don't close this. 馃槹

+1

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

stale please.

Nooooooo

+1

I would have expected this to be implemented the same way as error :confused:

+1

Was this page helpful?
0 / 5 - 0 ratings