2016-08-22 8 views
0

私はcssファイルtoken-input-mac.cssを追加した後、私のtext_areaはテキストinput_fieldのように非常に小さくなりました。どのように新しいCSSを保持し、text_fieldの高さのみを変更するのですか?ここで text_fieldを元のサイズに戻すにはどうすればいいですか?

は、フォントサイズが定義されているすべての場所が本当に小さいです トークン入力mac.css

/* Example tokeninput style #2: Mac Style */ 
fieldset.token-input-mac { 
position: relative; 
padding: 0; 
margin: 5px 0; 
background: #fff; 
width: 400px; 
height: 400px; 
border: 1px solid #A4BDEC; 
border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
} 

fieldset.token-input-mac.token-input-dropdown-mac { 
border-radius: 10px 10px 0 0; 
-moz-border-radius: 10px 10px 0 0; 
-webkit-border-radius: 10px 10px 0 0; 
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25); 
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25); 
-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25); 
} 

ul.token-input-list-mac { 
position: relative; 
overflow: hidden; 
height: auto !important; 
cursor: text; 
font-size: 12px; 
min-height: 1px; 
z-index: 999; 
margin: 0; 
padding: 0; 
background: transparent; 
} 

ul.token-input-list-mac.error { 
    border: 1px solid #C52020; 
    } 

    ul.token-input-list-mac li { 
    list-style-type: none; 
    } 

    li.token-input-token-mac p { 
    display: inline; 
    padding: 0; 
    margin: 0; 
    } 

li.token-input-token-mac span { 
    color: #231C34; 
    margin-left: 5px; 
    font-weight: bold; 
    cursor: pointer; 
    } 


    /* TOKENS */ 

    li.token-input-token-mac { 
    position: relative; 
    display: inline-block; 
    width: auto !important; 
    font-size: 8pt; 
    line-height: 12pt; 
    margin: 0px 3px 3px 0px; 
    padding: 4px 10px; 
    background: none; 
    background-color: #0F004E; 
    color: #fefefe; 
    cursor: default; 
    float: left; 
    font-weight: bold; 
    } 

    li.token-input-highlighted-token-mac { 
    background-color: #231C34; 
    color: #fefefe; 
    font-weight: bold; 
    } 

    li.token-input-selected-token-mac { 
    background-color: #231C34; 
    color: #fefefe; 
    font-weight: bold; 
    } 

li.token-input-highlighted-token-mac span.token-input-delete-token-mac { 
    color: #fefefe; 
    font-weight: bold; 
    } 

li.token-input-selected-token-mac span.token-input-delete-token-mac { 
    color: #fefefe; 
    font-weight: bold; 
} 

li.token-input-input-token-mac { 
    border: none; 
    background: transparent; 
    float: left; 
    padding: 0; 
    margin: 0; 
    } 

li.token-input-input-token-mac input { 
    width: 100px; 
    padding: 3px; 
    margin: 0; 
} 

div.token-input-dropdown-mac { 
    position: absolute; 
    border-top: none; 
    left: -1px; 
    right: -1px; 
    background-color: #fefefe; 
    overflow: hidden; 
    cursor: default; 
    font-size: 10pt; 
    } 

    div.token-input-dropdown-mac p { 
    font-size: 8pt; 
    margin: 0; 
    padding: 0 10px; 
    color: #fff; 
    } 

div.token-input-dropdown-mac h3.token-input-dropdown-category-mac { 
    font-size: 10pt; 
    font-weight: bold; 
    border: none; 
    padding: 0 5px; 
    margin: 0; 
    } 

div.token-input-dropdown-mac ul { 
    margin: 0; 
    padding: 0; 
    } 

div.token-input-dropdown-mac ul li { 
    list-style-type: none; 
    cursor: pointer; 
    background: none; 
    background-color: #fefefe; 
    margin: 0; 
    padding: 0 0 0 10px; 
    color: #999; 
    text-transform: uppercase; 
    } 

div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac { 
    float: right; 
    font-size: 8pt; 
    font-style: italic; 
    padding: 0 10px 0 0; 
    color: #999; 
    text-transform: uppercase;; 
} 

div.token-input-dropdown-mac ul li strong { 
    font-weight: bold; 
    text-decoration: underline; 
    color: #999; 
    text-transform: uppercase; 
} 

div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac, 
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd { 
    background: #0F004E; 
    color: #bb8322; //Official Red 
    text-transform: uppercase; 
    font-weight: bold; 
    } 

div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-  mac:hover, 
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:hover, 
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:focus, 
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:focus { 
color: #fff; 
} 

div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.token-input-dropdown-item-description-mac, 
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac { 
color: #fff; 
} 
+0

投稿してください。いくつかのHTMLも。 – Barthy

+0

を理解しやすくするためにhttps://jsfiddle.net/のようなツールを使用することもできます@Barthyはこれに対応できますか? http://stackoverflow.com/questions/39217439/how-to-modify-jquery-token-input-css-to-add-a-tiny-rectangle-around-the-x-to-can – codigomonstruo

答えて

0

です。 (あなたはフォントが14pxの最小になりたいでしょうし、ほとんどの人は、おそらく16または18pxを示唆している)、それを対応するHTMLページなしに伝えることは困難ですが、これらはおそらくあなたの問題のスタイルです:

ul.token-input-list-mac { 
font-size: 12px; 
} 

    li.token-input-token-mac { 
    font-size: 8pt; 
} 

div.token-input-dropdown-mac { 
    font-size: 10pt; 
} 

div.token-input-dropdown-mac p { 
    font-size: 8pt; 
} 

div.token-input-dropdown-mac h3.token-input-dropdown-category-mac { 
    font-size: 10pt; 
} 

div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac { 
    font-size: 8pt; 
} 
+0

Thanx Kate。レッスンはフォントについて学んだ。 – codigomonstruo

+0

ケイト、これに反応できますか? http://stackoverflow.com/questions/39217439/how-to-modify-jquery-token-input-css-to-add-a-tiny-rectangle-around-the-x-to-can – codigomonstruo

関連する問題