How can I take a screenshot of the entirety of a web browser (or just the HTML page) which includes the select input?
I can get the following images with Apple shift 4 and clicking space:
but I want something more like the following, where I had to manually choose the boundaries
Best Answer
As a UX Designer I very routinely need to capture menu dropdowns as well as the selected item within the drop down menu. Most of the time (though not always) I am able to do this via CMD-SHIFT-4 by first clicking the field, keeping the mouse pressed in one hand while pressing CMD-SHIFT-4 with the other hand. Most of the time the dropdown and even selected menu item will "freeze" and remain stationary on the screen while you draw your marquee around the screen area you want to capture. Then you release and have your custom shaped image. (I just did this on Youtube.com, Chrome Browser 64.0, High Sierra 10.13.3 )
Though quite often on a multitude of sites you can do this all via CMD-SHIFT-4 and thus no-need to later crop, the dropdown and selected item does not always "freeze" while you marquee around it. And there are also many times when I want to show an on-screen notification or confirmation effect in addition to the menu choices and selected item. In both cases I absolutely must resort to CMD-SHIFT-3 and, yes, crop afterwards.
I believe Leonard Challis's answer is sound and I know of no other way to achieve this than to use the full-screen screenshot command as he described. So what that it then requires having to crop the full-screen image captured to isolate the area you want to show. Maybe someone has found 3rd party software that let's you achieve your goal on the fly. Perhaps there is a Chrome or other browser extension that will freeze the screen to display the menu-dropdown selection state. Or maybe recorded Screen-capture is the better tool, particularly if you want to document a whole sequence of interface/selection instructions. And you can select key frames to crop into images. Doesn't appear anyone has provided any such suggested software.
I specifically and categorically disagree with grgarside's answer claiming that the CMD-SHIFT-3 solution is "even worse than OP's already described ⇧⌘4 for selecting a region, since you then have to open the image in Preview for cropping for no added benefit over taking a screenshot of a region." That's completely incorrect as the OP specifically wanted to be able to display the drop down menu. That's the added benefit.
ONE ADDENDUM: The CMD-SHIFT-4 "all in one" action also works the majority of the time on most sites when right-clicking a link and wanting to capture the pop up menu and your selection. 2 EXAMPLES right here on this thread: