Compass + Blueprint CSS =入力タグの幅は常に300pxですか？

Question

問題の原因を見つけようとしているうちに、すべてのカスタムスタイルシートを無効にしました。今、私は単一のSCSSスタイルシートしか使用していません。

@import "blueprint/reset"; 
@import "partials/base"; 
@import "blueprint"; 
@include blueprint; 

このスタイルシートは問題になります。私の全体のアプリケーションでは、私は次のよう<input>タグを使用しています：あなたが見ることができるように、私はフォーム要素のための青写真のspan-クラスを使用してい

<input class="span-17 title" type="text" size="30" name="customer[name]"> 

。コンパスなしでうまくいきました。

ただし、コンパスは、フォーム要素のための追加のスタイルルールを生成している。これらの二つのルールに

input.span-17, textarea.span-17, select.span-17 { 
    width: 840px; 
} 
/* followed by: */ 
input.text, input.title, input[type="email"], 
input[type="text"], input[type="password"] { 
    width: 300px; 
} 

は、すべて私の入力フィールドは、（完全に自分のアプリケーションのレイアウトを破壊する）300ピクセルの幅を取得します。なぜコンパスは上記の第2のルールを生成しているのですか（私には絶対に意味がありません）？そして、その行動をどうやって防ぐのですか？

更新：私は十分にはっきりしていないようです。フォームの入力フィールドにBlueprintのspan-クラスを使用したいと思います。すべて<input>の幅を一定値に設定することは、私が望んでいた解決策ではありません。代わりに、span-クラスをコンパスで動作させる方法を探しています。希望の動作はCompassなしのBlueprint CSSのようなものです。他のケースでは、たくさんのHTMLテンプレートを変更する必要があります。これはまさに私が避けようとしているものです。

Answer 1

可能であれば、要素の幅をjqueryで上書きできます。

$(document).ready(function(){ 
    $("input[type='text']", "input[type='password']").css("width","100px"); 
}); 

希望します。

Answer 2

より厳密なCSS規則を定義する必要があります。

このような何か試してみてください：

@import "blueprint/reset"; 
@import "partials/base"; 
@import "blueprint"; 
@include blueprint; 

body input.text, body input.title, body input[type="email"], 
body input[type="text"], body input[type="password"] { 
    width: inherit; 
} 

を以下の部分は、独自のコードである場合：

input.span-17, textarea.span-17, select.span-17 { 
    width: 840px; 
} 

あなたが同様にあなたのルールの特異性を高めることができます：

body input.span-17, body textarea.span-17, body select.span-17 { 
    width: 840px; 
} 

を

CSSの特異性（およびスターウォーズとの関係）の詳細はMalarkey's articleにあります。

Answer 3

私はあなたが自動的に作成input.spanクラスがそれを使用していないしたくない場合は@include blueprint;等グリッドを含めた全体のショー、フォーム、タイポグラフィ、

にもたらすと信じています。ただしてください：

@include blueprint-grid;