コントロール記述：CSSサポート状況

ctrl:input要素の場合、type属性の値によって作成されるコントロールが異なります。

type属性が省略された場合

テキストフィールドが作成されます。

type属性の値がbooleanの場合

チェックボックスが作成されます。

type属性の値がdateの場合

日付入力コントロールが作成されます。

作成されるコントロールごとに、CSSへの対応状況やデフォルトのスタイルは異なります。

ctrl:secret要素では、入力した文字列を*に置き換えて画面に表示するテキスト入力コントロールが作成されます。

CSSへの対応状況

プロパティ名	対応状況	備考
margin margin-top margin-right margin-bottom margin-left	部分対応	<percentage>とautoには対応していません。
padding padding-top padding-right padding-bottom padding-left	部分対応	<percentage>には対応していません。
border-width border-top-width border-right-width border-bottom-width border-left-width	対応	-
border-color border-top-color border-right-color border-bottom-color border-left-color	対応	-
border-style border-top-style border-right-style border-bottom-style border-left-style	対応	-
border border-top border-right border-bottom border-left	対応	-
width	部分対応	<percentage>には対応していません。 4pxから9,999pxまでの値を設定できます。
height	部分対応	<percentage>には対応していません。 1pxから9,999pxまでの値を設定できます。 表示されるときの高さは、コントロールを表示するときに使用されているフォントの高さより小さくはなりません。
color	対応	-
background-color	対応	-
background-image	対応	-
background-repeat	対応	-
background	部分対応	<background-attachment>と<background-position>には対応していません。
font-family	対応	-
font-style	対応	obliqueはitalicとして扱われます。
font-weight	部分対応	normalとboldに対応しています。 bolderはboldとして扱われます。そのほかはnormalとして扱われます。
font-size	対応	-
font	部分対応	<font-variant>には対応していません。
text-decoration	非対応	-
cursor	対応	-

デフォルトのスタイル

デフォルトでは、次のスタイルが適用されます。

border : 1px solid ThreeDShadow;
background-color : Window;
color : WindowText;
padding : 1px;

ctrl:textarea要素では、改行を入力できる複数行の文字列入力コントロールが作成されます。

CSSへの対応状況

プロパティ名	対応状況	備考
margin margin-top margin-right margin-bottom margin-left	部分対応	<percentage>とautoには対応していません。
padding padding-top padding-right padding-bottom padding-left	部分対応	<percentage>には対応していません。
border-width border-top-width border-right-width border-bottom-width border-left-width	対応	-
border-color border-top-color border-right-color border-bottom-color border-left-color	対応	-
border-style border-top-style border-right-style border-bottom-style border-left-style	対応	-
border border-top border-right border-bottom border-left	対応	-
width	部分対応	<percentage>には対応していません。 28pxから9,999pxまでの値を設定できます。
height	部分対応	<percentage>には対応していません。 28pxから9,999pxまでの値を設定できます。 表示されるときの高さは、コントロールを表示するときに使用されているフォントの高さに20pxを加えた高さより小さくはなりません。
color	対応	-
background-color	対応	-
background-image	対応	-
background-repeat	対応	-
background	部分対応	<background-attachment>と<background-position>には対応していません。
font-family	対応	-
font-style	対応	obliqueはitalicとして扱われます。
font-weight	部分対応	normalとboldに対応しています。 bolderはboldとして扱われます。そのほかはnormalとして扱われます。
font-size	対応	-
font	部分対応	<font-variant>には対応していません。
text-decoration	非対応	-
cursor	対応	-

デフォルトのスタイル

デフォルトでは、次のスタイルが適用されます。

border : 1px solid ThreeDShadow;
background-color : Window;
color : WindowText;
padding : 1px;

ctrl:range要素では、スピナーコントロールが作成されます。

CSSへの対応状況

プロパティ名	対応状況	備考
margin margin-top margin-right margin-bottom margin-left	部分対応	<percentage>とautoには対応していません。
padding padding-top padding-right padding-bottom padding-left	部分対応	<percentage>には対応していません。
border-width border-top-width border-right-width border-bottom-width border-left-width	対応	-
border-color border-top-color border-right-color border-bottom-color border-left-color	対応	border-top-colorは、数値を増減するボタンの背景色にも使用されます。
border-style border-top-style border-right-style border-bottom-style border-left-style	対応	-
border border-top border-right border-bottom border-left	対応	-
width	部分対応	<percentage>には対応していません。 22pxから9,999pxまでの値を設定できます。
height	部分対応	<percentage>には対応していません。 8pxから9,999pxまでの値を設定できます。 表示されるときの高さは、コントロールを表示するときに使用されているフォントの高さより小さくはなりません。
color	対応	-
background-color	対応	-
background-image	対応	-
background-repeat	対応	-
background	部分対応	<background-attachment>と<background-position>には対応していません。
font-family	対応	-
font-style	対応	obliqueはitalicとして扱われます。
font-weight	部分対応	normalとboldに対応しています。 bolderはboldとして扱われます。そのほかはnormalとして扱われます。
font-size	対応	-
font	部分対応	<font-variant>には対応していません。
text-decoration	非対応	-
cursor	対応	-

デフォルトのスタイル

デフォルトでは、次のスタイルが適用されます。

border-width : 1px;
border-style : solid;
border-color : ThreeDShadow ThreeDFace ThreeDFace ThreeDShadow;
background-color : Window;
color : WindowText;
padding : 1px;
width : 60px;

ctrl:select1要素の場合、appearance属性の値によって作成されるコントロールが異なります。

appearance属性の値がfullの場合

ラジオボタンが作成されます。

appearance属性の値がcompactの場合

リストボックスが作成されます。

appearance属性の値がminimalの場合

selection属性の値によって、作成されるコントロールが異なります。selection属性の値がopenの場合は、コンボボックスが作成されます。selection属性の値がcloseの場合は、ドロップダウンリストが作成されます。

作成されるコントロールごとに、CSSへの対応状況やデフォルトのスタイルは異なります。

ctrl:select要素では、複数選択できるリストボックスが作成されます。

CSSへの対応状況

プロパティ名	対応状況	備考
margin margin-top margin-right margin-bottom margin-left	部分対応	<percentage>とautoには対応していません。
padding padding-top padding-right padding-bottom padding-left	部分対応	<percentage>には対応していません。
border-width border-top-width border-right-width border-bottom-width border-left-width	対応	-
border-color border-top-color border-right-color border-bottom-color border-left-color	対応	-
border-style border-top-style border-right-style border-bottom-style border-left-style	対応	-
border border-top border-right border-bottom border-left	対応	-
width	部分対応	<percentage>には対応していません。 28pxから9,999pxまでの値を設定できます。
height	部分対応	<percentage>には対応していません。 4pxから9,999pxまでの値を設定できます。 表示されるときの高さは、コントロールを表示するときに使用されているフォントの高さより小さくはなりません。
color	対応	-
background-color	対応	-
background-image	対応	-
background-repeat	対応	-
background	部分対応	<background-attachment>と<background-position>には対応していません。
font-family	対応	-
font-style	対応	obliqueはitalicとして扱われます。
font-weight	部分対応	normalとboldに対応しています。 bolderはboldとして扱われます。そのほかはnormalとして扱われます。
font-size	対応	-
font	部分対応	<font-variant>には対応していません。
text-decoration	部分対応	blinkには対応していません。
cursor	対応	-

デフォルトのスタイル

デフォルトでは、次のスタイルが適用されます。

border : 1px solid ThreeDShadow;
background-color : Window;
color : WindowText;
padding : 1px;

ctrl:trigger要素では、ボタンコントロールが作成されます。

CSSへの対応状況

プロパティ名	対応状況	備考
margin margin-top margin-right margin-bottom margin-left	部分対応	<percentage>とautoには対応していません。
padding padding-top padding-right padding-bottom padding-left	部分対応	<percentage>には対応していません。
border-width border-top-width border-right-width border-bottom-width border-left-width	対応	-
border-color	部分対応	最初に指定された色を上下左右の描画に使用します。
border-top-color border-right-color border-bottom-color border-left-color	非対応	-
border-style border-top-style border-right-style border-bottom-style border-left-style	非対応	-
border	部分対応	色の指定は、最初に指定された色を上下左右の描画に使用します。
border-top border-right border-bottom border-left	部分対応	色の指定には対応していません。
width	部分対応	<percentage>には対応していません。 1pxから9,999pxまでの値を設定できます。 表示されるときの幅は、ラベル文字列の幅より小さくはなりません。
height	部分対応	<percentage>には対応していません。 1pxから9,999pxまでの値を設定できます。 表示されるときの高さは、ラベル文字列の高さより小さくはなりません。
color	対応	-
background-color	対応	-
background-image	非対応	-
background-repeat	非対応	-
background	部分対応	<background-attachment>と<background-position>には対応していません。
font-family	対応	-
font-style	対応	obliqueはitalicとして扱われます。
font-weight	部分対応	normalとboldに対応しています。 bolderはboldとして扱われます。そのほかはnormalとして扱われます。
font-size	対応	-
font	部分対応	<font-variant>には対応していません。
text-decoration	部分対応	blinkには対応していません。
cursor	対応	-

デフォルトのスタイル

デフォルトでは、次のスタイルが適用されます。

border-width : 1px;
border-style : solid;
border-color : ButtonHighlight ThreeDDarkShadow ThreeDDarkShadow ButtonHighlight;
background-color : ButtonFace;
color : ButtonText;
padding : 0em 0.2em 0em 0.2em;

ctrl:select-color要素では、色選択コントロールが作成されます。

CSSへの対応状況

プロパティ名	対応状況	備考
margin margin-top margin-right margin-bottom margin-left	部分対応	<percentage>とautoには対応していません。
padding padding-top padding-right padding-bottom padding-left	部分対応	<percentage>には対応していません。
border-width border-top-width border-right-width border-bottom-width border-left-width	対応	-
border-color border-top-color border-right-color border-bottom-color border-left-color	対応	border-top-colorは、カラーパレットを表示するボタンの背景色にも使用されます。
border-style border-top-style border-right-style border-bottom-style border-left-style	対応	-
border border-top border-right border-bottom border-left	対応	-
width	部分対応	<percentage>には対応していません。 62pxから9,999pxまでの値を設定できます。
height	部分対応	<percentage>には対応していません。 4pxから9,999pxまでの値を設定できます。 表示されるときの高さは、コントロールを表示するときに使用されているフォントの高さより小さくはなりません。
color	非対応	-
background-color	対応	-
background-image	対応	-
background-repeat	対応	-
background	部分対応	<background-attachment>と<background-position>には対応していません。
font-family	非対応	-
font-style	非対応	-
font-weight	非対応	-
font-size	非対応	-
font	非対応	-
text-decoration	非対応	-
cursor	対応	-

デフォルトのスタイル

デフォルトでは、次のスタイルが適用されます。

border-width : 1px;
border-style : solid;
border-color : ThreeDShadow ThreeDFace ThreeDFace ThreeDShadow;
background-color : Window;
color : WindowText;
padding : 1px;

ctrl:border要素では、コントロールをグループ化してタイトルを付けられるボーダーが作成されます。

CSSへの対応状況

プロパティ名	対応状況	備考
margin margin-top margin-right margin-bottom margin-left	部分対応	<percentage>とautoには対応していません。
padding padding-top padding-right padding-bottom padding-left	部分対応	<percentage>には対応していません。
border-width border-top-width border-right-width border-bottom-width border-left-width	対応	-
border-color	部分対応	最初に指定された色を上下左右の描画に使用します。
border-top-color border-right-color border-bottom-color border-left-color	非対応	-
border-style border-top-style border-right-style border-bottom-style border-left-style	対応	-
border	部分対応	色の指定は、最初に指定された色を上下左右の描画に使用します。
border-top border-right border-bottom border-left	部分対応	色の指定には対応していません。
width	部分対応	<percentage>には対応していません。 1pxから9,999pxまでの値を設定できます。 表示されるときの幅は、内部に表示される要素や ctrl:label要素の幅よりも小さくはなりません。 このプロパティが指定されたときは、子要素を指定された幅にします。表示結果はボキャブラリコンポーネントの実装に依存します。
height	部分対応	<percentage>には対応していません。 1pxから9,999pxまでの値を設定できます。 表示されるときの高さは、内部に表示される要素の合計の高さより小さくはなりません。
color	対応	-
background-color	対応	-
background-image	対応	-
background-repeat	対応	-
background	部分対応	<background-attachment>と<background-position>には対応していません。
font-family	非対応	-
font-style	非対応	-
font-weight	非対応	-
font-size	非対応	-
font	非対応	-
text-decoration	非対応	-
cursor	対応	-

デフォルトのスタイル

デフォルトでは、次のスタイルが適用されます。

border : 1px solid ThreeDShadow;

ctrl:static-label要素では、ラベル文字列が作成されます。
ctrl:label要素では、コントロール要素内のラベル文字列が作成されます。
ctrl:item要素は、 ctrl:select1要素や ctrl:select要素の選択肢となる項目が作成されます。

CSSへの対応状況

プロパティ名	対応状況	備考
margin margin-top margin-right margin-bottom margin-left	部分対応	<percentage>とautoには対応していません。
padding padding-top padding-right padding-bottom padding-left	部分対応	<percentage>には対応していません。
border-width border-top-width border-right-width border-bottom-width border-left-width	対応	-
border-color border-top-color border-right-color border-bottom-color border-left-color	対応	-
border-style border-top-style border-right-style border-bottom-style border-left-style	対応	-
border border-top border-right border-bottom border-left	対応	-
width	部分対応	<percentage>には対応していません。 1pxから9,999pxまでの値を設定できます。
height	部分対応	<percentage>には対応していません。 1pxから9,999pxまでの値を設定できます。 表示されるときの高さは、ラベル文字列の高さより小さくはなりません。
color	対応	-
background-color	対応	-
background-image	対応	-
background-repeat	対応	-
background	部分対応	<background-attachment>と<background-position>には対応していません。
font-family	対応	-
font-style	対応	obliqueはitalicとして扱われます。
font-weight	部分対応	normalとboldに対応しています。 bolderはboldとして扱われます。そのほかはnormalとして扱われます。
font-size	対応	-
font	部分対応	<font-variant>には対応していません。
text-decoration	部分対応	blinkには対応していません。
cursor	対応	-

デフォルトのスタイル

デフォルトでは、次のスタイルが適用されます。

border : 0px;