CSS输入字段无响应

时间：2015-08-16 18:19:35

标签： css3

我在智慧结束时可以真正使用一些帮助。我正在尝试创建一个输入字段，在这种情况下，“PASSWORD”是灵活的，当屏幕调整大小时，字段和数据也是如此，但它不起作用。我看到了两个问题：

1：它只允许17个字符之类的东西，然后什么都没有。我想要的是在你失去对场地的关注之后，如果它比场本身大，则该场填充“...”（文本溢出：省略号）。

  1. 在输入时允许超过17个字符。如果我使用百分比，例如80％，当屏幕调整大小时，它会将字段连续放下，使其既不漂亮也不响应。

    2. http://jsfiddle.net/lepew/y3jkyx1c/6/ 

        okayButton.setOnAction(e -> {       
           .........
        }
    });

    body
{
  background: #181818;
}


/* ******************************************************************** */
/*                                                                      */
/*  This is the sunken field.  It will be generic for all forms.        */
/*                                                                      */
/* ******************************************************************** */
#form_Sunk
{
   margin: 0 auto;
   width: 90%;
   height: 30px;
   line-height: 30px;
   border-radius: 4px;
   display: inline-block;
   text-transform: uppercase;
   background: repeat-x center center #000;
   box-shadow: rgba(255,255,255, 0.15) 1px 1px;
   -webkit-box-shadow: rgba(255,255,255,0.15) 1px 1px;
}

/* ******************************************************************** */
/*                                                                      */
/*  This is the gray button WITHIN the sunken field.                    */
/*                                                                      */
/* ******************************************************************** */
#sunk_Knob
{
   float: left;
   color: #fff;
   height: 26px;
   background: #777;
   text-align: left;
   line-height: 26px;
   font-weight: bold;
   position: relative;
   margin: 2px 0 0 2px;
   padding: 0 6px 0 6px;
   border-radius: 3px 0 0 3px;
}

/* ******************************************************************** */
/*                                                                      */
/*  This is the data area WITHIN the sunken field.                      */
/*                                                                      */
/* ******************************************************************** */
#sunk_Data
{
   color: cyan;
   padding-left: 5px;
   padding-right: 25px;
   font-weight: bold;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

/* ******************************************************************** */
/*                                                                      */
/*  This is the Tool Tip WITHIN the sunken field.                       */
/*  LEFT is used when it is INSIDE the sunken area.                     */
/*  RIGHT is used when it is OUTSIDE the sunken area.                   */
/*                                                                      */
/* ******************************************************************** */
#sunk_Tool
{
   top: -22px;
   xleft: -7px;
   right: -20px;
   width: 14px;
   height: 14px;
   float: right;
   position: relative;
   background: url("question-mark-000.png") no-repeat scroll 0px 0px transparent;
}


/*  GOOD from HERE ^^^^^ up.  */


#peter04
{
   border: 0 none;
   color: yellow;
   padding-left: 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   padding-right: 25px;
   background-color: transparent;
   -webkit-appearance: none;
}

#sunk_Tips
{
   top: 8px;
   right: -20px;
   width: 14px;
   height: 14px;
   float: right;
   position: relative;
   background: url("question-mark-000.png") no-repeat scroll 0px 0px transparent;
}

::-ms-clear
{
   display: none;
}

    非常感谢任何帮助。

1 个答案:

答案 0 :(得分：0)

以下是如何使用display: flex获取密码字段以进行响应的示例。它使用flex: grow属性使密码框占用其容器中的剩余水平空间。我添加的主要CSS是：

#form_Sunk > * {
    display: block;
}

#form_Sunk input {
    flex-grow: 1;
}

#sunk_Knob
{
   ...
   flex-shrink: 0;
}

您可以在此处了解有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请注意，为了使您的HTML有效，您需要将许多ID更改为类，并且通常会重新标记您的标记。 HTML文档中只能有一个具有特定ID的元素。此示例旨在向您展示演示定位/大小调整概念所需的最小更改。

完整的实例：

＆＃13;
＆＃13; 
body
{
  background: #181818;
}


/* ******************************************************************** */
/*                                                                      */
/*  This is the sunken field.  It will be generic for all forms.        */
/*                                                                      */
/* ******************************************************************** */
#form_Sunk
{
   margin: 0 auto;
   width: 90%;
   height: 30px;
   line-height: 30px;
   border-radius: 4px;
   display: flex;
   text-transform: uppercase;
   background: repeat-x center center #000;
   box-shadow: rgba(255,255,255, 0.15) 1px 1px;
   -webkit-box-shadow: rgba(255,255,255,0.15) 1px 1px;
}

#form_Sunk > * {
    display: block;
}

#form_Sunk input {
    flex-grow: 1;
}

/* ******************************************************************** */
/*                                                                      */
/*  This is the gray button WITHIN the sunken field.                    */
/*                                                                      */
/* ******************************************************************** */
#sunk_Knob
{
   float: left;
   color: #fff;
   height: 26px;
   background: #777;
   text-align: left;
   line-height: 26px;
   font-weight: bold;
   position: relative;
   margin: 2px 0 0 2px;
   padding: 0 6px 0 6px;
   border-radius: 3px 0 0 3px;
   flex-shrink: 0;
}

/* ******************************************************************** */
/*                                                                      */
/*  This is the data area WITHIN the sunken field.                      */
/*                                                                      */
/* ******************************************************************** */
#sunk_Data
{
   color: cyan;
   padding-left: 5px;
   padding-right: 25px;
   font-weight: bold;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

/* ******************************************************************** */
/*                                                                      */
/*  This is the Tool Tip WITHIN the sunken field.                       */
/*  LEFT is used when it is INSIDE the sunken area.                     */
/*  RIGHT is used when it is OUTSIDE the sunken area.                   */
/*                                                                      */
/* ******************************************************************** */
#sunk_Tool
{
   top: -22px;
   xleft: -7px;
   right: -20px;
   width: 14px;
   height: 14px;
   float: right;
   position: relative;
   background: url("question-mark-000.png") no-repeat scroll 0px 0px transparent;
}


/*  GOOD from HERE ^^^^^ up.  */


#peter04
{
   border: 0 none;
   color: yellow;
   padding-left: 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   padding-right: 25px;
   background-color: transparent;
   -webkit-appearance: none;
}

#sunk_Tips
{
   top: 8px;
   right: -20px;
   width: 14px;
   height: 14px;
   float: right;
   position: relative;
   background: url("question-mark-000.png") no-repeat scroll 0px 0px transparent;
}

::-ms-clear
{
   display: none;
}
＆＃13; 
<body>

<form action="" method="post">
   <div id="form_Sunk">
      <div id="sunk_Knob">
         User ID:
      </div>
      <div id="sunk_Data" title="THIS IS TEST CODE FOR NADA.">
         THIS IS TEST CODE FOR NADA.
      </div>
      <div id="sunk_Tool" title="USER ID">
      </div>
   </div>

   <br />
   <br />

   <div id="form_Sunk">
      <div id="sunk_Knob">
         Password:
      </div>
      <input type="text" name="pword" id="peter04" placeholder="Password">
      <div id="sunk_Tips" title="PASSWORD">
      </div>
   </div>

   <br />
   <br />
   <div id="form_Sunk">
      <div id="sunk_Knob">
         Code:
      </div>
      <div id="sunk_Data" title="THIS IS TEST CODE FOR NADA.">
         THIS IS TEST CODE FOR NADA.
      </div>
      <div id="sunk_Tool" title="CODE">
      </div>
   </div>
   <br />
   <br />
</form>  
    
</body
＆＃13;
＆＃13;
＆＃13;

JSFiddle版本：http://jsfiddle.net/y3jkyx1c/8/

相关问题
最新问题