c# - 已编辑行的自定义样式 GridView ASP.NET

Question

我正在寻找在我的 GridView 中编辑的行的样式。

我知道如何更改背景颜色和字体，但我需要的是它看起来像在网格上，就像有阴影一样，编辑的行必须真正突出显示。

我的样式.css:

.grid_normalRow /*on mouse out event*/
{
       background-color:white;
}
.grid_highlightedRow /*on mouse over event*/
{
       background-color:aqua;
}
.grid_editedRow /*on row editing event - The one i need to change */
{
       background-color:yellow;
       font-weight: bold;
       height: 30px;

}

我找不到合适的 css 样式来完成我的要求。

Answer 1

你觉得这个方法怎么样？

编辑:如果您使用的是表格，您可以通过在 tr 上添加 display: block 来使 Box Shadow 工作。我更新了 Codepen展示它是如何工作的。

.grid_editedRow
/*The one i need to change*/

{
  background-color: lemonchiffon;
  font-weight: bold;
  height: 30px;
  border: 1px solid;
  box-shadow: 0 0 5px black;
}
.grid_normalRow
/*on mouse out event*/

{
  /* adding bg color messes with the shadow effect */
  /* background-color:white; */
}
.grid_highlightedRow
/*on mouse over event*/

{
  background-color: aqua;
}
tr {
  display: block;
}

<table>
  <tr class="grid_normalRow">
    <td>yet</td>
    <td>another</td>
    <td>grid</td>
    <td>row</td>
  </tr>
  <tr class="grid_editedRow">
    <td>Hi</td>
    <td>How</td>
    <td>Are</td>
    <td>you?</td>
  </tr>
  <tr class="grid_normalRow">
    <td>yet</td>
    <td>another</td>
    <td>grid</td>
    <td>row</td>
  </tr>
  <tr class="grid_highlightedRow">
    <td>yet</td>
    <td>another</td>
    <td>grid</td>
    <td>row</td>
  </tr>
</table>

你可以在这个 Codepen 中看到结果效果