Changing a page to edit mode using css

Question

I am not to sure if this is completely possible now a days but can i change the view of a page after clicking a button without javascript and using css instead?

I am currently displaying a page with information and once the user clicks the edit button - instead of going to a different page the user will be able to make changes in the same view.

This is how the page will be displayed to the user: jsFiddle of display

<div>living the dream</div>
<hr/>
<div>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<div>Edit button</div>

And this is how the page will look after the user clicks on the edit button: jsFiddle of edit view

<div class="page" contenteditable>living the dream</div>
<hr/>
<div class="content" contenteditable>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

So the classes will be hidden until the edit button is clicked then they will be added to the divs

Can i accomplish this with just css and if not what are my alternatives instead of javascript?

Hi, look at this answer , hope can be useful : http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — Carlo G., Oct 19 '15 at 07:54
without javascript, as @CarloG. linked you, will not be possible, only when ' :active' — Zander, Oct 19 '15 at 07:56
CSS cannot modify the DOM. It can only be used for styling. If you can leave the class tags in at all times, you can use `.page[contenteditable]` to conditionally style it when the editable flag is added — CodingIntrigue, Oct 19 '15 at 07:59
@RGraham yes but my save button will do the modifying of the content when saving since it will be touching the backend. I am mainly looking into changing how the edit page is presented — 072et, Oct 19 '15 at 08:01
@Cheshire so you are saying up until i actually have to save the edit changes i could. I know during the saving process it will be different. — 072et, Oct 19 '15 at 08:09
@072et the thing is that what you are trying to achieve it's a dynamic element. CSS just styles the elements. You need from javascript/jQuery to change the behavior of the elements to achieve what you are trying to achieve. — Zander, Oct 19 '15 at 08:16

NooBskie · Answer 1 · 2015-10-19T08:53:16.197

Could you do something like this? using the check-box hack its possible to switch to the contenteditable mode

Codepen http://codepen.io/noobskie/pen/gaXqgm?editors=110

The thing is im not sure how you could go about saving it as ive never really worked with content editable im not sure if you can pick the values up dynamically

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

input[type=checkbox]:checked ~ div {
  display: inline;
}

.container {
  display: none;
  position: absolute;
  top: 9px;
  left: 8px;
  right: 8px;
  width: auto;
}

.page {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  background-color: white;
  background-color: -moz-field;
  border: 1px solid darkgray;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  text-align: left;
  padding-top: 9px;
  padding-left: 10px;
  height: 25px;
}

.content {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  background-color: white;
  border: 1px solid gray;
  border-radius: 5px;
  font: medium -moz-fixed;
  height: 128px;
  overflow: auto;
  padding: 2px;
  resize: both;
  position: relative;
  bottom: 12px;
}

<div>living the dream</div>
<hr/>
<div>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<input type="checkbox" id="button" />
<label for="button" onclick>Edit Button</label>

<div class="container">
  <div class="page" contenteditable>living the dream</div>
  <hr/>
  <div class="content" contenteditable>
      <p>Lorem ipsum dolor sit amet...</p>
  </div>
<input type="checkbox" id="button" />
<label for="button" onclick>Save Button</label>
</div>

Changing a page to edit mode using css

1 Answers1