Question

我有一张桌子，我们有很多输入框。我想要做的是，当它获得焦点时，宽度增加类似于Google Docs电子表格编辑器中发生的情况。首先是守则

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

此代码在某些地方可以正常工作，但扩展的输入框在收到焦点时不会与下一个单元格重叠，而是在它之下，然后重新出现在该单元格的末尾。

注意：没有。列不固定，我认为Z-index值存在问题。

我想要的是什么：http://imm.io/TOuB
我得到了什么：http://imm.io/TOuf

Answer 1

点击此处working example

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

Answer 2

试试这个

 /*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>

表格单元格中的输入框应该在焦点上展开

2 个答案: