How do I leave the background of a Hover color input in a table?

Asked

Viewed 59 times

1

Is there any way to let an input that by default has its white background-color stick to the color of the line at the time of Hover?

input { border: none; outline: none }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primeiro</th>
      <th scope="col">Input</th>
      <th scope="col">Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td><input type="text" value="teste 1"></td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td><input type="text" value="teste 2"></td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

html5 css3 css-hover

1 answer

2


Yes, but then the user will not realize that the field is editable, see how it would look

inserir a descrição da imagem aqui 

input { border: none; outline: none }

.table-hover tbody tr:hover input{
  background-color: rgba(0,0,0,0);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primeiro</th>
      <th scope="col">Input</th>
      <th scope="col">Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td><input type="text" value="teste 1"></td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td><input type="text" value="teste 2"></td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

  • Cool @hugocsl , the user question I’ll insert an edit button there when it is clicked I focus on input, no problem. But, could explain the operation, it’s like set a black background with opacity is this?

  • @Leandrade actually no... what happens is that this background color of TR, is a black with opacity, is the bootstrap pattern, and as I got the bootstrap CSS style straight the color came in RGBA, but vc can just put transparent there if you want. My intention was not to mess with the class hierarchy of the bootstrap, so I put the complete line .table-hover tbody tr:hover before the input. Detail that as far as I know the BS does not have a class type bg-Transparent or bg-None, so have to do on hand

  • 1

    Okay, I get it. Thanks @hugocsl.

  • 1

    @Leandrade tmj!

Browser other questions tagged html5 css3 css-hover

You are not signed in. Login or sign up in order to post.