11

ユーザーがコードを記述できるテキストエリアを備えたフォームがあります。そのテキストエリアをCodeMirrorコード エディター ボックスに置き換えているので、それに Bootstrap スタイルを適用したいと考えています。

コード エディタを除くすべてのフォーム要素に Bootstrap スタイルが設定されている現在のフォームは次のようになります。ここに画像の説明を入力

したがって、特に、コード エディターに丸みを帯びた角、境界線、正しい幅 (input-xxlarge)、およびマウス オーバー時に青色のハイライトを与える必要があると思います。

どうすればいいですか？必要な CSS を手動でコピーする以外に、これを行う方法はありますか?

アップデート

Bootstrap から textarea CSS をコピーしようとしましたが、コード エディター内をクリックすると、フォーカス CSS を除いてすべてがうまく見えます。これは私が得るものです：

ここに画像の説明を入力

ハイライトは外側ではなく内側にあります。これを修正する方法はありますか？

これは、Bootstrap からコピーして追加した CSS です。

    .CodeMirror {
      line-height: 1.3em;
      font-family: monospace;

      /* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */
      position: relative;
      /* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */
      overflow: hidden;
      background-color: white;
      width: 530px;

      /* Copied from Bootstrap's textarea */
      display: inline-block;
      padding: 4px 6px;
      margin-bottom: 9px;
      color: #555555;
      border: 1px solid #ccc;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
      -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
      -o-transition: border linear 0.2s, box-shadow linear 0.2s;
      transition: border linear 0.2s, box-shadow linear 0.2s;  
    }

    .CodeMirror-focused {
      /* Copied from Bootstrap's textarea */
      border-color: rgba(82, 168, 236, 0.8);
      outline: 0;
      outline: thin dotted \9;
      /* IE6-9 */

      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);  
    }
4

2 に答える 2

10

Code Mirror および Bootstrap (v3 および v4):
スタイリングは検証状態 (has-error、has-warning、has-success) をまだサポートしていません。

.CodeMirror {
  /* Bootstrap Settings */
  box-sizing: border-box;
  margin: 0;
  font: inherit;
  overflow: auto;
  font-family: inherit;
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); /* Bootstrap 3 */
  box-shadow: none; /* Bootstrap 4 */
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  /* Code Mirror Settings */
  font-family: monospace;
  position: relative;
  overflow: hidden;
}
    
.CodeMirror-focused {
  /* Bootstrap Settings */
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); /* Bootstrap 3 */
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); /* Bootstrap 4 */
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
于 2014-12-31T23:55:27.813 に答える
6

CodeMirror はオリジナルを隠し、要素と要素textareaの (かなり複雑な) 構造を作成します。のクラスを持つ最も外側のスタイルを設定して、同じ効果を得ることができます。divprediv.CodeMirror

これには、CodeMirror スタイルシートをカスタマイズするか、クラス/要素に独自のスタイルを追加する必要があります。LESS を使用して Bootstrap を構築している場合、textareaスタイルの重複を避けるために mixin を適用する方法があるかもしれませんが、重複の量はおそらく最小限です。

于 2012-10-05T08:07:35.297 に答える