Question

CSS Amateur here。

编辑：有关重点的问题已经解决。我只是没有看到:和focus之间有空格...＆＃34;数字＆＃34;]：焦点。   我有一个工具提示的CSS，但我不知道在哪里放它以及如何只在选择文本字段时才显示它。

小提琴：http://jsfiddle.net/v8xUL/274/

.tooltip
{
position: absolute;
padding: 1px 10px;
margin-left: 6px;
background: #06DEE5;
font-size: 12px;
line-height: 20px;
color: #000;
-moz-box-shadow: 2px 2px 3px #444;
-webkit-box-shadow: 2px 2px 3px #444;
box-shadow: 2px 2px 3px #444;
}

我刚从网站上获得了＃34; Inspect element＆＃34;

现在，即使未在图像上看到文本框，也会显示该文本框：http://i.share.pho.to/694c27e9_o.png。我只需要在选择该文本字段时显示Please enter name。

Answer 1

在您的jsfiddle中，您没有包含表单标记，因此提供的CSS不起作用。

要选择工具提示，您需要兄弟选择器+。此选择器将选择紧接着的下一个dom元素，如果它与选择器的其余部分匹配，则按照css执行更改。在这种情况下，我们正在寻找一个“工具提示”类并将背景更改为红色的兄弟姐妹：

input:focus + .tooltip {
  background:red;
}

我已经改变了小提琴以包含兄弟选择器：

http://jsfiddle.net/v8xUL/267/

修改

隐藏工具提示，直到您专注于元素：

隐藏工具提示：

.tooltip {
  display:none;
}

显示焦点上的工具提示：

input:focus + .tooltip {
  display:block;
}

更新了jsfiddle：http://jsfiddle.net/v8xUL/269/

Answer 2

你应该使用“display”

.tooltip 
{
    display: none;
    position: absolute;
    padding: 1px 10px;
    margin-left: 6px;
    background: #06DEE5;
    font-size: 12px;
    line-height: 20px;
    color: #000;
    -moz-box-shadow: 2px 2px 3px #444;
    -webkit-box-shadow: 2px 2px 3px #444;
    box-shadow: 2px 2px 3px #444;
}

form input[type="text"]:focus,
form input[type="number"]: focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus
{
    background: #06DEE5;
}

 input:focus + .tooltip {
    display:block;
}
}

Answer 3

尝试这样：Demo

CSS：

.form-input {
  appearance: none; 
  font-family: 'Open Sans', sans-serif;  
  line-height: 1;
  width: 100%;
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  margin-top: 2px;
  color: #666;
}

.tooltip {
  display: block;
  visibility: hidden;
  overflow: hidden;
  box-sizing: border-box;
  height: 0;
  margin-bottom: -8px;
  cursor: help;  
  padding: 4px 16px;
  background: yellow;
  color: #000;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
:focus + .tooltip {
  margin-bottom: 0;
  height: auto;
  visibility: visible;

}

HTML：

<input type="text" pattern=".{5,100}" required title="At least 5 characters" maxlength="100" name="contact_name" class='form-input' placeholder="Full Name" title="Input your name here." />
<div class="tooltip">Please enter name</div>

CSS工具提示放在哪里

3 个答案:

修改