Stuck編輯HTML文本源代碼爲CSS

-3

我陷入了將HTML源文本作爲CSS編輯的簡單任務。我希望有人能夠幫助我確信有一個非常簡單的答案。我遇到困難的原因是因爲當我嘗試查看我試圖編輯的網頁的.css文件時，所有文本元素（如文本標題等）似乎都從代碼中省略。我對CSS一無所知，所以我很掙扎。Stuck編輯HTML文本源代碼爲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 '>

來源

2016-11-03 winterfrost

不知道我理解你想要做什麼 - 編輯「HTML源爲CSS」聽起來不像一個簡單的任務或似乎太大的意義。你能再詳細一點嗎？什麼阻止你編輯你粘貼的HTML源代碼？ –

發佈缺少的開始'div'，所以我們會看到可以做什麼。 – LGSon

聽起來就像你想用CSS改變HTML源代碼，你基本上不能這樣做。有些內容像[內容屬性]（https://developer.mozilla.org/en-US/docs/Web/CSS/content），但沒有什麼會做你所問的（據我所知）。 – hungerstar

-2

我認爲這是更好的顯示和隱藏，而不是刪除正如你看到的，我添加的類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>

來源

2016-11-03 21:12:57

如果OP可以將類添加到標記中，爲什麼他們不直接更新標記呢？ – hungerstar

我們可以使用javascript或jquery更改HTMl，但我不認爲使用CSS來編輯HTML內容 –

JS未被標記爲在帖子中，因此它可能不是OP的可行選項。 – hungerstar

，如果你能只能編輯CSS級別的內容，並且不能編輯HTML文件，那麼唯一合理的方法是：

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

但請記住它將應用於所有text-contrast元素，因此如果您在代碼中包含更多這些元素，那麼您可能很需要以某種方式更改HTML。

來源

2016-11-03 21:15:50 pixelCss

簽入和簽出共享相同的CSS選擇器，因此您的僞裝元素不會出現。你需要更多的特定選擇器來防止這種情況。 – hungerstar

~~假設缺少啓動 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>

來源

2016-11-03 21:18:48 LGSon

這將'日期範圍'放在'入住'之前（不會替換）。它也不隱藏'退房'。儘管謝謝你的迴應！ – winterfrost

@winterfrost當然它的工作，看看你的最後一個div在你發佈的缺失html – LGSon

@winterfrost更新我的答案與你添加到你的問題的代碼 – LGSon

隱藏退房文字很簡單：

.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; 
}

來源

2016-11-03 21:22:43

我用這個來隱藏'Check-out'，但是其餘的建議都沒有奏效。 'code'.end_date的.text對比度{ 位置：相對; 文本縮進：-9999px; }。 – winterfrost

糟糕'.start_date的.text-contrast'也需要'顯示：塊;'或'顯示：直列block'（根據頁面佈局的方式）'text-indent'屬性可以工作 –

不確定我瞭解你，這個地方'*日期範圍'*位於*'簽入'之上。 start_date .t外部對比顯示：塊{ 位置：相對; text-indent：-9999px; } .start_date .text-contrast :: before { content：'Date range'; position：absolute; text-indent：0; }' – winterfrost

Stuck編輯HTML文本源代碼爲CSS

回答

相關問題