Question

我想知道是否可以将样式专注于标签（使用↹浏览页面），但如果用户点击该项目则不会。

就像复选框的默认行为一样。如果我使用tab，它会变成蓝色轮廓（看起来像盒子阴影）。

就像我想要一个新的红色框阴影/轮廓按标签聚焦但不是如果用户点击复选框。

＆＃13;

<input id="checkBox" type="checkbox">

＆＃13;

Answer 1

你可以通过Jquery

来实现

＆＃13;

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    $('#checkBox').addClass('outline');
  }
});

document.addEventListener('click', function(e) {
  $('#checkBox').removeClass('outline');
});

＆＃13;

.outline{
 box-shadow: 2px 2px 2px red;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkBox" type="checkbox">

＆＃13;

或
这个插件：https://github.com/ten1seven/track-focus
in css：

body[data-whatinput="keyboard"] #checkBox:focus { box-shadow: 0 0 5px red; }

Answer 2

您可以设置复选框的所有可能状态：

＆＃13;

   input:focus {
      box-shadow: 2px 2px 2px rgba(255,0,0,.5);
    }
    input:checked {
      box-shadow: none;  
      /* HIDE OUTLINE - ACCESSIBILITY BAD PRACTICE */
      outline: none;
    }

＆＃13;

    <input id="checkBox" type="checkbox">

＆＃13;

Answer 3

当您将鼠标放在上面时，重点将是。如果您在点击时不想要它，则可以使用悬停代替。

＆＃13;

   input:hover {
      box-shadow: 2px 2px 2px rgba(255,0,0,.5);  
    }
    input:checked {
      box-shadow: none;  
    }

＆＃13;

    <input id="checkBox" type="checkbox">

＆＃13;

您还可以通过设置标签样式来创建自己的样式。看看https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

Answer 4

使用我在评论中提供的链接解决方案，
（Input effect on keyboard tab -> focus, but NOT on click）

以下是我要做的事情：

＆＃13;

var body = document.getElementsByTagName("BODY")[0];

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    body.classList.add('show-focus-outlines');
  }
});

document.addEventListener('click', function(e) {
  body.classList.remove('show-focus-outlines');
});

＆＃13;

body.show-focus-outlines input:focus {
  outline: none;
  box-shadow: 0 0 8px 2px red;
}

body:not(.show-focus-outlines) input:focus {
  outline: none;
}

＆＃13;

<body>
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</body>

＆＃13;

请注意，我只使用了Javascript（在链接中，这是jQuery），
并尝试使用CSS渲染一些不错的东西。

希望它有所帮助。

Answer 5

很简单。您可以使用

CREATE TEMPORARY TABLE IF NOT EXISTS 
  pet_temp ( INDEX(p_id, e_id, ts) )  
AS (
  SELECT p_id, e_id, ts, data1, data2, data3
  FROM processes_history
  WHERE e_id=4362 AND ts BETWEEN '2017-03-01' AND '2017-04-01'
) SELECT p_id, e_id, ts, data1, data2, data3 FROM pet_temp WHERE p_id IN (11,22,33,44,55,66,77,88,99);

作为样式元素如果你想在Clicked on object上使用不同的样式，请使用:focus来设置样式。

这是:active标记的示例。

<a>

.click,.focus{
color : red;
text-decoration: none;
}
.click:focus{
outline: none;
color: red;
text-decoration: none;
background-color: #fff;
}
.click:active{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}

.focus:focus{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}
.focus:active{
outline: none;
color: red !important;
text-decoration: none;
background-color: #fff !important;
}

是否有可能只关注复选框上的标签？

5 个答案: