CSS - ime-mode

The ime-mode CSS property controls the state of the input method editor for text fields. According to the spec:

Example

 

CSS
<input type="text" name="name" value="initial value" style="ime-mode: disabled">

This example disables input method support for a field. This was a common practice for fields that enter data into databases that don't support extended character sets, for example. However:

Note: Don't rely on disabling IME to prevent extended characters from passing through your form. Even with IME disabled, users can still paste extended characters into your form's fields.

Syntax  

CSS
ime-mode: auto;
ime-mode: normal;
ime-mode: active;
ime-mode: inactive;
ime-mode: disabled;

/* Global values */
ime-mode: inherit;
ime-mode: initial;
ime-mode: unset;

Values

auto
No change is made to the current input method editor state. This is the default.
normal
The IME state should be normal; this value can be used in a user style sheet to override the page's setting. This value is not supported by Internet Explorer.
active
The input method editor is initially active; text entry is performed through it unless the user specifically dismisses it. Not supported on Linux.
inactive
The input method editor is initially inactive, but the user may activate it if they wish. Not supported on Linux.
disabled
The input method editor is disabled and may not be activated by the user.

Note: In general, it's not appropriate for a public web site to change the IME mode. This property should only be used for private, internal web applications and the like.

Formal syntax

CSS
auto <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> normal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> active <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> inactive <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> disabled

Description  

The ime-mode CSS property controls the state of the input method editor for text fields. According to the spec:

"ime-mode" is a property somewhat implemented in some browsers, that is problematic and officially obsoleted by this specification...

User agents are instructed by the spec to not support ime-mode and authors are advised not to use it, unless to undo the property if it was previously set by legacy code. It was introduced by Microsoft with Internet Explorer 5 as a proprietary extension: -ms-ime-mode Attribute | imeMode Property

Initial valueauto
Applies totext fields
Inheritedno
Mediainteractive
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support No support 3.0 (1.9) 5.0 [1] No support No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

[1] IE8 introduced -ms-ime-mode as a vendor-prefix for ime-mode. Don't use the -ms- prefix.

Notes  

Unlike Internet Explorer, Firefox's implementation of ime-mode allows this property on <input type="password">. However, this makes for a bad user experience, and password fields should not enable the IME. Users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following CSS into their user stylesheet:

CSS
input[type=password] {
    ime-mode: auto !important;
}

The Macintosh version of Gecko 1.9 (Firefox 3) can't recover the previous state of the IME when a field for which it is disabled loses focus, so Mac users may get grumpy when you use the disabled value.

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'ime-mode' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support No support 3.0 (1.9) 5.0 [1] No support No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

[1] IE8 introduced -ms-ime-mode as a vendor-prefix for ime-mode. Don't use the -ms- prefix.

Specifications  

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'ime-mode' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/ime-mode

CSS CSS Property NeedsMobileBrowserCompatibility