Stuck编辑HTML文本源代码为CSS

Question

我陷入了将HTML源文本作为CSS编辑的简单任务。我希望有人能够帮助我确信有一个非常简单的答案。我遇到困难的原因是因为当我尝试查看我试图编辑的网页的.css文件时，所有文本元素（如文本标题等）似乎都从代码中省略。我对CSS一无所知，所以我很挣扎。

下面是HTML源：

<div> 
 
    <label class='text-contrast'>Check-in</label> 
 
    <input autocomplete='off' required type='text' id='cf-query-start_date' class=' date form-control' value='' data-alt='#alt_cf-query-start_date' data-datepicker='' /> 
 
    <input type='hidden' name='start_date' id='alt_cf-query-start_date' class='alt_date' value='2016-11-04'> 
 
</div> 
 
<div class='input-placeholder-group form-group mobile-browser mobidates end_date '> 
 
    <label class='text-contrast'>Check-out</label> 
 
</div>

很简单，我想改变“入住”到“日期范围”并删除“退房”文本元素。需要使用CSS编辑器来完成。

编辑：缺少DIV部分：

<div class="container"> 
     <h2 class="text-jumbo text-contrast">REDACTED</h2> 
        <div class="sticker"> 
      <form method='get' action='/reserve' id='cf-query' class='search-area full form-inline' role='form'>  
     <input type='hidden' name='filter_item_id' id='filter_item_id' value='' /> 
     <input type='hidden' name='customer_id' value=''/> 
     <input type='hidden' name='date' id='date' value='' /> 
     <input type='hidden' id='widget-arg-item_id' class='cf-widget-arg' name='item_id' value='' /><input type='hidden' name='category_id' id='category_id' value='0'/><input type='hidden' name='view' id='cf-query-view' value='H'/> 
     <div class='search-form-input-wrapper'> 
     <div class='input-placeholder-group form-group mobile-browser mobidates start_date '> 

Answer 1

我认为这是更好的显示和隐藏，而不是删除正如你看到的，我添加的类SHW，HDN

<label class='text-contrast Shw'>Check-in</label> 
<label class='text-contrast Hdn'>Date Range</label> 
      <input autocomplete='off' required type='text' id='cf-query-start_date' class=' date form-control' value='' data-alt='#alt_cf-query-start_date' data-datepicker=''/> 
       <input type='hidden' name='start_date' id='alt_cf-query-start_date' class='alt_date' value='2016-11-04'> 
     </div> 
     <div class='input-placeholder-group form-group mobile-browser mobidates end_date '> 
      <label class='text-contrast'>Check-out</label> 

Answer 2

，如果你能只能编辑CSS级别的内容，并且不能编辑HTML文件，那么唯一合理的方法是：

.text-contrast { 
    display: none; 
} 
.text-contrast:after { 
    content: 'Date range'; 
} 

但请记住它将应用于所有text-contrast元素，因此如果您在代码中包含更多这些元素，那么您可能很需要以某种方式更改HTML。

Answer 3

假设缺少启动 div看起来像这样 <div class='input-placeholder-group form-group mobile-browser mobidates start_date '>， 你可以做

div.start_date label,  /* this rule take out the Check-in/out labels */ 
 
div.end_date label { 
 
    display: none; 
 
} 
 
div.start_date::before { /* this rule add the Date Range */ 
 
    content: 'Date Range' 
 
}

<div class="container"> 
 
    <h2 class="text-jumbo text-contrast">REDACTED</h2> 
 
    <div class="sticker"> 
 
    <form method='get' action='/reserve' id='cf-query' class='search-area full form-inline' role='form'> 
 
     <input type='hidden' name='filter_item_id' id='filter_item_id' value='' /> 
 
     <input type='hidden' name='customer_id' value='' /> 
 
     <input type='hidden' name='date' id='date' value='' /> 
 
     <input type='hidden' id='widget-arg-item_id' class='cf-widget-arg' name='item_id' value='' /> 
 
     <input type='hidden' name='category_id' id='category_id' value='0' /> 
 
     <input type='hidden' name='view' id='cf-query-view' value='H' /> 
 
     <div class='search-form-input-wrapper'> 
 
     <div class='input-placeholder-group form-group mobile-browser mobidates start_date '> 
 
      <label class='text-contrast'>Check-in</label> 
 
      <input autocomplete='off' required type='text' id='cf-query-start_date' class=' date form-control' value='' data-alt='#alt_cf-query-start_date' data-datepicker='' /> 
 
      <input type='hidden' name='start_date' id='alt_cf-query-start_date' class='alt_date' value='2016-11-04'> 
 
     </div> 
 
     <div class='input-placeholder-group form-group mobile-browser mobidates end_date '> 
 
      <label class='text-contrast'>Check-out</label> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

Answer 4

隐藏退房文字很简单：

.end_date .text-contrast { 
    display: none; 
} 

我们”重新错过了div那个ds是第一个.text-contrast元素，但可以根据第二个div的.end_date的方式假设它具有类别.start_date（或类似）。因此，这应该改变画面上显示的文字工作：

.start_date .text-contrast { 
    display: block; 
    position: relative; 
    text-indent: -9999px; 
} 
.start_date .text-contrast::before { 
    content: 'Date range'; 
    position: absolute; 
    text-indent: 0; 
}