Question

在我添加了css文件token-input-mac.css后，我的text_area变得非常小，就像文本input_field一样。如何保留新的css并仅更改text_field的高度。

这是 token-input-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;
 }

Answer 1

定义字体大小的所有地方都非常小。没有相应的HTML页面很难分辨，但这些可能是你的问题风格（你希望字体最小为14px，大多数人可能建议16或18px）：

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;
}

如何让我的text_field恢复原来的大小？

1 个答案: