Как сделать панель ввода текста прозрачной, но сохранить текст внутри сплошного? - PullRequest
Новая
       12

Как сделать панель ввода текста прозрачной, но сохранить текст внутри сплошного?

0 голосов
/ 10 октября 2019

Есть ли способ сделать панель ввода текста прозрачной, но оставить текст внутри панели сплошным цветом? Проблема, которую я получаю, заключается в том, что, устанавливая непрозрачность полос, он также регулирует непрозрачность текстов.

Мне нужно, чтобы текст был сплошным белым, иначе он не будет выделяться из строки ввода и цвета текста. заголовок, содержащий его.

HTML: 

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
    <link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
  </head>
  <body>
    <div class="container">
       <header>
           <input type="text" id="input" placeholder="Add an item"/>
           <button id="button"  type="button"><img src="./img/additem.png"></button>
        </header>
           <div id="list">


           </div>
        </div>
     <script src="resources/JS/app.js"></script>
  </body>
</html>

CSS: 

#input{
  width:100%;
  height:40px;
  border:0;
  opacity:0.6;
  color:rgba(255, 255, 255, 0.9);
  text-indent: 20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

1 Ответ

0 голосов
/ 10 октября 2019

Я действительно смог понять это. В случае, если у кого-то еще есть эта проблема, я исправил ее, используя «background: rgba (255, 255, 255, 0.3);»сделать только панель ввода прозрачной. Поскольку текст не изменяется, вы просто устанавливаете цвет текста, как правило, используя «color:».

CSS: 

#input{
  width:100%;
  height:40px;
  border:0;
  background: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  text-indent: 20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
...