I have a field in my content type for blood pressure which, as you may or may not know, is measured ##/###. Currently, I have one text box and I ask the users to enter data in the form ##/### which works well but, on phones the '/' characters is annoying to navigate to. I was wondering how I could split up the field some that it would be 2 input fields separated with a '/' like:

Blood Pressure [ ] / [ ]

Where [ ] represents a input field.

Any other suggestions to solve this problem would be great as well.


1 Answer 1


Honestly, I'd recommend creating two separate fields, one for systolic pressure and another for diastolic pressure. Then, use CSS to organize the fields the way you want. It actually makes more sense to do it this way since they represent two distinct values, even though they're used together conventionally to represent blood pressure.

To expand on the answer, specifically on the CSS side, here are some additional tips.

Once you've found a way to isolate the two fields with classes, I recommend displaying both of their div wrappers as display: inline-block; and, for the first field (systolic pressure) give it a rule that uses the after pseudo-class to add the '/'.

.classes .isolating .systolic-field:after {
  content: "/";
.classes .isolating .systolic-field {
  display: inline-block;
.classes .isolating .diastolic-field {
  display: inline-block;

If you're not familiar with CSS I can provide a more "concrete" example, but this should be sufficient.

  • This sounds like it will work, I will try it later and let you know. Thanks!
    – Mike
    May 15, 2012 at 6:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.