Question

I’m trying to create a very basic chat system, part of which will be the entry box for lines of chat. If the user is logged in, that’s all I need; but if the user is not logged in, I want an additional text box to allow them to enter their name.

I have the following HTML (although of course it can be altered):

<form>
  <input type="text" placeholder="Name?" name="name" id="name"> <!-- This line may be absent -->
  <input type="text" placeholder="What do you want to say?" name="say" id="say">
</form>

Is it possible to style this with CSS so that #name and #say together fill the whole width of the form, with #say taking all the width if #name is absent?

(The backend is Ruby on Rails; I have javascript available, so can use a JS solution, but would prefer pure CSS if possible)

Answer 1

For a simple, all-CSS solution, try the first-child pseudo-selector to overide a default half-width when #say is the first element inside of the form:

#name, #say{width:100px}
#say:first-child{width:200px}

This works perfectly fine with your simple markup structure. (I’ve tested it)