Microsoft Webフレームワークを使用してボタンのスタイルを制御する方法は？

Question

私はMicrosoft Web frameworkを使用しています。

button document、

<button name="button" class="c-button" type="submit">Button</button> 

に続いて、私の青いボタンを与えます。

タイプbuttonを使用しますが、灰色のボタンが表示されます。

<button name="button" class="c-button" type="button">Button</button> 

ボタンのスタイルを正しく制御するにはどうすればよいですか？ .btn、a.cボタン[役割=ボタン]、button.cへボタン：このボタンは、このことから、その背景色を取得しているように感謝し、あなたのjsフィドルから

jsfiddle

Answer 1

MWFは設計上、特にMicrosoftプロパティ全体でデザインの一貫性を達成するために、CSSを使用してタイプ属性を指定します。タイプ= "ボタン"の使用はすべてスタイルが同じです。同様に、type = "submit"の使用も同様にスタイル付けされます。これにより、MWFがこのスタイルを変更することを決定した場合、このマークアップを使用するすべてのウェブサイトが同時に更新されたスタイルを受け取るようになります。

MWFのアーキテクチャは、ブートストラップ、ファンデーション、マテリアルなどの他のフレームワークとは大きく異なります。これは、Microsoft Design Languageのガイドラインを満たすように設計されているためです。

Answer 2

は、それが見えます。これを上書きするには、次のコードをcssファイルに入れます。

.btn, a.c-button[role=button], button.c-button { 
    background-color: blue; 
} 

それは多くの場合、要素を検査し、スタイルが適用されているかを確認するには、ブラウザの開発者ツールを使用すると便利です。