0

多くの入力ボックスがある表があります。私がやりたいことは、Google Docs Spreadsheet Editor で起こるのと同じように、フォーカスを取得すると幅が大きくなることです。まずコード

HTML:

<table class="borderbg">
<tr class="thead">
<th class="stylethLeft"><div id="blank"></div></th>
<th class="styleth">blah</th>
<th class="styleth">blah</th>
</tr>
<tr>
<td class="tdstyle_serial_number">1</td>
<td class="td_names" id="alpha"><input type="text"
class="styledinput" /></td>
 <td class="td_twochars" id="alpha"><input type="text"
  class="styledinput" /></td>
  </tr>
  </table>

そして関連するCSS

//Input Box
input.styledinput{
background:#FFF;
 border:0;
 margin:0;
 padding:0 1% 0 1%;
  width:98%;
 height:100%;
 font-size:12px;
  } 
 //Focus
 .styledinput:focus{
  border:2px solid #205081;
   width:250%;
  z-index:15;
   }
  //table class
  .borderbg{
   border:1px solid #989292;
    visibility: visible;
    border-left:none;
    border-top:none;
    border-collapse:collapse;

    padding:0;
    float:left;
    margin-top:0; 
    margin-left:0;
}

このコードはいくつかの場所で正常に動作しますが、フォーカスを受け取ったときに展開された入力ボックスが次のセルに重ならず、代わりにその下に入り、そのセルの最後に re が表示されます。

注: いいえ。の列が固定されていないため、Z-index 値に問題があると思います。

私が欲しいもの: http://imm.io/TOuB
私が得るもの: http://imm.io/TOuf

4

2 に答える 2

0

これを試して

 /*Input Box*/

  input.styledinput{
  background:#FFF;
  border:0;
  margin:0;
  padding:0 1% 0 1%;
  width:98%;
 height:100%;
  font-size:12px;
 } 

/*Focus*/

.styledinput:focus{
  border:2px solid #205081;
  width:250%;
  z-index:20;
 position:relative;
 }

/*table class*/

 .borderbg{
   border:1px solid #989292;
  visibility: visible;
  border-left:none;
  border-top:none;
  border-collapse:collapse;
  padding:0;
  float:left;
  margin-top:0; 
  margin-left:0;

}
</style>
于 2013-01-23T12:58:46.473 に答える
0

ここで実際の例を参照してください

CSS:

.search label{
    font-size:0.75em;
    font-weight:bold;
    color:#333;
    text-indent:-9999em;
    display:block;
    float:left;
}

.search input[type="text"]{
    text-indent:1px;
    padding:0 0 0 22px;
    width:0;
    height:22px;
    background:url(http://www.ian-thomas.net/examples/search-icon.png)2px 2px no-repeat, -webkit-linear-gradient(top, rgba(100,100,100,1) 0%, rgba(80,80,80,1) 10%, rgba(22,22,22,1)100%);
    background:url(http://www.ian-thomas.net/examples/search-icon.png)1px 2px no-repeat, -moz-linear-gradient(top, rgba(100,100,100,1) 0%, rgba(80,80,80,1) 10%, rgba(22,22,22,1)100%);
    border:1px solid #333;
    color:#999;
    line-height:20px;
    font-weight:bold;
    -moz-text-shadow:1px 1px 1px rgba(0,0,0,0.05);
    -webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.05);
    text-shadow:1px 1px 1px rgba(0,0,0,0.05);
    -webkit-border-radius:6px;
    -webkit-box-shadow:1px 1px 0 rgba(0,0,0,0.125); 
    -webkit-transition:width 0.5s ease-in-out;
    -moz-border-radius:6px;
    -moz-box-shadow:1px 1px 0 rgba(0,0,0,0.125); 
    -moz-transition:width 0.5s ease-in-out;
    cursor:pointer;
}

.search input[type="text"]:focus{
    width:200px;
    outline:none;
    background:url(http://www.ian-thomas.net/examples/search-icon.png)2px 2px no-repeat, -webkit-linear-gradient(bottom,rgba(100,100,100,1) 0%, rgba(40,40,40,1) 2%, rgba(22,22,22,1)100%);
    background:url(http://www.ian-thomas.net/examples/search-icon.png)1px 2px no-repeat, -moz-linear-gradient(bottom,rgba(100,100,100,1) 0%, rgba(40,40,40,1) 2%, rgba(22,22,22,1)100%);
    -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.125);
    -moz-box-shadow:1px 1px 0 rgba(255,255,255,0.125);
    cursor:text;
}
于 2013-01-23T11:35:09.663 に答える