css input点击给外层div加边框

你可以在 input 元素的点击事件中，使用 JavaScript 代码获取到外层 div 元素，并给它添加边框样式。示例代码如下：

HTML 代码：

<div class="container">
  <input type="text" id="input">
</div>

CSS 代码：

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

.container.active {
  border-color: blue;
}

JavaScript 代码：

const input = document.getElementById('input');
const container = input.parentNode;

input.addEventListener('click', function() {
  container.classList.add('active');
});

这样，当 input 元素被点击时，就会给外层 div 元素添加一个名为 "active" 的 CSS 类，从而改变它的边框样式。

相关问题

vue input点击给外层div加边框

可以通过绑定样式的方式来实现，具体步骤如下：

1. 给外层 div 添加一个类名，比如 `wrapper`。

2. 给 input 绑定一个 `@focus` 事件，在事件处理函数中使用 `$refs` 获取到外层 div 的 DOM 元素，然后使用 `classList` 添加一个样式类名，比如 `focus`。

3. 在样式表中，定义 `wrapper` 类的样式，包括默认样式和 focus 样式，比如：

.wrapper {
  border: 1px solid #ccc;
  padding: 10px;
}

.wrapper.focus {
  border-color: blue;
}

这样，当 input 获得焦点时，就会给外层 div 添加一个蓝色边框。完整代码如下：

<template>
  <div class="wrapper" ref="wrapper">
    <input type="text" @focus="handleFocus">
  </div>
</template>

<script>
export default {
  methods: {
    handleFocus() {
      this.$refs.wrapper.classList.add('focus');
    }
  }
};
</script>

<style>
.wrapper {
  border: 1px solid #ccc;
  padding: 10px;
}

.wrapper.focus {
  border-color: blue;
}
</style>

css 样式给div盒子加变边框阴影

您可以使用CSS的box-shadow属性和border属性来给div盒子添加变边框阴影。例如，以下CSS代码可以让一个div元素添加一个2像素的灰色边框和一个5像素的黑色阴影：

div {
    border: 2px solid #ccc;
    box-shadow: 5px 5px 5px #000;
}

其中，box-shadow属性的第一个值是水平偏移量，第二个值是垂直偏移量，第三个值是模糊半径，第四个值是阴影颜色。注意，box-shadow属性的多个值之间需要用空格分隔。

border属性用于定义边框的宽度、样式和颜色。上面的代码中，border属性的值为“2px solid #ccc”，表示一个2像素宽的实线边框，颜色为灰色（#ccc）。