Changing placeholder text with CSS only

Question

I am building one of those contact forms that are conversational. I have code that works but I don't think it is optimal (at the bottom). The form looks like:

The code is live on this codepen

The problem I was solving was that the placeholder text on one of them is very large and would either break into two lines or if I gave it a fixed width, it would break the layout of smaller mobile phones. Yes, I understand the the very simple solution would be to propose a change to the copy for any instance, but going on the fact that it cannot be done, how would I solve swapping the text based on the device width.

My proposed solution was to reduce the text on mobile. Since there they are more flexible with the mobile product, I can make these changes, but the desktop needs to comply with the PSD.

HTML

<input type="text" id="org" name="" placeholder="ORGANIZATION OR COMPANY NAME">

CSS

#org{
  display: block;
  width: 96%;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #org{
    display: inline-block;
    width: 360px;
  }
}

It needs to be at least 360px to match the PSD for desktop.

One other option that I have is if I have entirely different inputs, would that work? like

<input type="text" id="org" class="orgm" name="" placeholder="ORG/COMPANY">
<input type="text" id="org" class="orgd" name="" placeholder="ORGANIZATION OR COMPANY NAME">


.orgm { //mobile
    display: block;
}
.orgd {
    display: none;
}
@media only screen and (min-width: 768px) {
  .orgm{
      display: none;
      width: 96%;
      margin: 0 auto;
  }
  .orgd {
      display: inline-block;
      width: 360px;
      margin: 0;
  }
}

Answer 1

I think that you are mistaking the purpous of the placeholder attribute.

A label element should be used to indicate what the field is for and a placeholder should provide an example of the format to use.

When you use a seperate label you have much more flexability in how you style it. You can use a "label as placeholder" pattern, where you place the label on top of the input so it appeares to be the placeholder. You would have to move the label when the input is focused.

In the snippet below I have created two lable's for the input. It would be very easy to show and hide based on a media query.

<label for="org" class="show-for-large">Organization or Company Name</label>
<label for="org" class="show-for-small" hidden>Org/Company</label>
<input type="text" id="org" name="" placeholder="Code Review">

Answer 2

Change the word break and overflow properties and then change the size of the container for the text for your @media query. The result will be a box that hides the rest of the text for different screen sizes rather than change the content. You also could make two different p tag elements; one with display: visible the other hidden. Then you can toggle the display properties of these text elements given your @media query results.