html文本框选中效果

要为 HTML 文本框添加选中效果，可以使用 CSS 的 `:focus` 伪类。

例如，下面的 CSS 样式会在文本框获得焦点时添加选中效果：

input[type="text"]:focus {
  border-color: #4d90fe;
  box-shadow: 0 0 5px rgba(77, 144, 254, 0.5);
}

这里使用了 `input[type="text"]` 选择器来选择所有的文本输入框，然后使用 `:focus` 伪类来指定文本框获得焦点时的样式。在上面的例子中，我们添加了一个蓝色边框和一个浅蓝色阴影来表示选中效果。你可以根据自己的需求自定义这些样式。

你可以将上面的样式添加到你的 CSS 文件中，或者将其写入 HTML 文件中的 `<style>` 标签中。例如：

<style>
  input[type="text"]:focus {
    border-color: #4d90fe;
    box-shadow: 0 0 5px rgba(77, 144, 254, 0.5);
  }
</style>

<input type="text" placeholder="请输入文本">

这里的 `<input>` 元素将显示一个文本框，并在获得焦点时显示选中效果。

相关问题

js点击按钮，弹窗内的文本框展示选中的数据内容

好的，可以参考下面的代码实现：

HTML部分：

<button onclick="showSelectedText()">点击展示选中文本</button>
<div id="myPopup" class="popup">
  <input type="text" id="selectedText" placeholder="这里将会展示选中的文本">
</div>

JS部分：

function showSelectedText() {
  var selectedText = "";
  if (window.getSelection) {
    selectedText = window.getSelection().toString();
  } else if (document.selection && document.selection.type != "Control") {
    selectedText = document.selection.createRange().text;
  }
  document.getElementById("selectedText").value = selectedText;
  // 弹出弹窗
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

CSS部分：

.popup {
  position: fixed;
  bottom: 50px;
  right: 50px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  z-index: 1;
}

.popup input[type="text"] {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 3px;
}

/* 显示弹窗 */
.popup.show {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

/* 动画效果 */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

以上代码实现了点击按钮后，获取选中的文本并展示在弹窗内的文本框中。注意，这里使用了弹窗的样式，需要在CSS部分添加弹窗的样式和动画效果。

select选中某个值时文本框对应显示或隐藏

可以使用 JavaScript 来实现当 `select` 选中某个值时，文本框对应显示或隐藏的效果。具体实现思路是通过监听 `select` 的 `change` 事件，当选中某个选项时，根据其值来决定文本框的显示或隐藏。

以下是一个示例代码，当 `select` 选中值为 "show" 时，显示文本框，选中其他值时，隐藏文本框：

<select id="mySelect">
  <option value="hide">Hide Textbox</option>
  <option value="show">Show Textbox</option>
</select>

<input type="text" id="myTextbox" style="display:none;">

<script>
var select = document.getElementById("mySelect");
var textbox = document.getElementById("myTextbox");

select.addEventListener("change", function() {
  if (select.value === "show") {
    textbox.style.display = "block";
  } else {
    textbox.style.display = "none";
  }
});
</script>

在上面的代码中，我们通过 `getElementById` 方法获取了 `select` 和 `input` 元素，并为 `select` 元素添加了 `change` 事件监听。当用户选择某个选项时，事件处理函数中的 `if` 语句会判断选项的值是否为 "show"，如果是，则将文本框的 `display` 样式属性设置为 "block"，以显示文本框，否则将其设置为 "none"，以隐藏文本框。

你可以根据实际需求修改上面的代码，以实现不同的功能。