帮我写一可以更改样式的input

这是一个基本的 HTML 输入框，可以通过 CSS 更改样式：

<input type="text" placeholder="请输入内容" class="my-input">

在 CSS 中，您可以使用以下代码更改输入框的样式：

.my-input {
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  transition: border-color 0.3s ease-in-out;
}

.my-input:focus {
  border-color: #007bff;
}

这个 CSS 样式将使输入框变得有吸引力，具有以下特点：

- 字体大小为 16px
- 内边距为 10px
- 边框为 1px 实心的 #ccc 颜色
- 边框半径为 5px，使其有圆角
- 没有阴影
- 没有轮廓线
- 当输入框获得焦点时，边框颜色变为蓝色 (#007bff)
- 有 0.3s 的颜色过渡效果

您可以根据需要更改这些属性。

相关问题

给我一个只读input好看的样式

当然，我可以给你一个只读的 input 的好看样式示例。以下是一个基于 Quasar 的 Vue 3 示例：

<template>
  <div class="custom-input">
    <q-input readonly dense outlined v-model="inputValue" />
  </div>
</template>

<style>
.custom-input {
  position: relative;
  display: inline-block;
}

.custom-input .q-field__native {
  background-color: #f5f5f5;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  color: #555;
}

.custom-input .q-field__native:focus {
  outline: none;
}

.custom-input .q-field__label {
  color: #888;
}

.custom-input .q-field__bottom-row {
  display: none;
}
</style>

上面的示例代码定义了一个名为 `custom-input` 的外部容器，然后在内部嵌入了一个只读的 q-input 组件。通过自定义样式，我们设置了输入框的背景色、边框、内边距、字体大小和颜色等属性，以及隐藏了底部行。你可以根据自己的需求进一步修改这些样式。

帮我写一个图书馆界面的css样式

好的，以下是一个简单的图书馆界面的 CSS 样式代码：

/* 整体布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页眉 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  font-size: 36px;
  font-weight: bold;
  color: #333;
}

.header a {
  font-size: 18px;
  color: #333;
  text-decoration: none;
}

/* 搜索栏 */
.search {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.search input[type="text"] {
  padding: 10px;
  font-size: 18px;
  border-radius: 5px;
  border: none;
  flex-grow: 1;
}

.search button {
  padding: 10px;
  font-size: 18px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin-left: 20px;
}

/* 图书列表 */
.book-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.book-card {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.book-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.book-card h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 10px;
}

.book-card p {
  font-size: 16px;
  color: #666;
  margin: 10px;
}

.book-card button {
  padding: 10px;
  font-size: 18px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin: 10px;
  cursor: pointer;
}

你可以根据需要进行修改和适配。