[CSS] table點擊表格(td),然後將4邊邊框都換顏色

下圖是 table 表格某一個td的初始動態:
Screen Shot 2015-06-11 at 11.12.43 AM

下圖是點擊上面那個 td 之後,加上 active 這個 class 後的狀態:
Screen Shot 2015-06-11 at 11.12.34 AM

// 上面的 scss 如下:
td{
  border:1px solid #ccc;
  text-align: center;
  cursor: pointer;
  position: relative;
  i{
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -7px;
    margin-left: -22px;
    display: none;
  }
  &.active{
    color:green;
    background-color: #E8FEDC;
    border:1px solid #59AE35;
    i{
      display: inline-block;  
    }
  }
}

這時會發現只有右邊框、下邊框有換色成功,那左邊框、上邊框呢?只要善用 :before 、 :after 即可達成(加上藍字部份):

// 更新後的完整 scss 如下:
td{
  border:1px solid #ccc;
  text-align: center;
  cursor: pointer;
  position: relative;
  i{
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -7px;
    margin-left: -22px;
    display: none;
  }
  &.active{
    color:green;
    background-color: #E8FEDC;
    border:1px solid #59AE35;
    &:before{
      content: "";
      background-color: #59AE35;
      height: 1px;
      position: absolute;
      top:-1px;
      left:-1px;
      right:-1px;
    }
    &:after{
      content: "";
      background-color: #59AE35;
      width: 1px;
      position: absolute;
      top:-1px;
      left:-1px;
      bottom:-1px;
    }
    i{
      display: inline-block;  
    }
  }
}

如圖:
Screen Shot 2015-06-11 at 11.18.57 AM

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of