Html 如何在带有数据列表的输入字段中设置标签值

我能够用Reactjs在html5中创建一个带有数据列表的输入字段。reactjs代码如下所示：

const Container = props => {
  const countryList = props.countries.map(c => <option key={c} value={c} />);

  return (
    <div>
      <input list="countries" name="Country" />
      <datalist id="countries">{countryList}</datalist>
    </div>
  );
};

const Container=props=>{
constcountrylist=props.countries.map（c=>）；
返回(
{countryList}
);
};

这段代码被证明工作正常，比如说输入字段在那里，如果用户在字段中键入了什么，相关列表就会显示出来。问题是输入字段是空的，没有任何标签。因此，需要一个指示字段内容的指示器，例如，可以在输入字段的左侧或顶部添加一个标签，但这会占用更多页面空间

因此，我想在输入字段中添加一些浅色的文本指示器/标签，当用户单击此输入字段时，文本指示器将消失，用户可以插入值并获取数据列表

任何人都可以就如何实现这一目标提出一些建议

<input list="countries" name="Country" placeholder="sometext"/>

非常感谢，这正是我想要的：）